Scaffold and AppBar

Part of the Your First App section of Coddy's Flutter journey. Lesson 4 of 32.

Scaffold is the frame of a screen. It gives you a blank page and places for the usual parts of an app. Its body: is the main area, and its appBar: is the bar across the top.

Scaffold(
  appBar: AppBar(
    title: Text('Settings'),
  ),
  body: Center(
    child: Text('Nothing here yet'),
  ),
)

AppBar draws the top bar and shows its title: in it. A widget can take several named parts like this, each written as name: value,.

Challenge

Easy

Give the app a top bar:

add an appBar: to the Scaffold, above its body:
make it an AppBar whose title: is Text('My First App')

Try it yourself

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: Text('Welcome'),
        ),
      ),
    );
  }
}