#Lecture 001 — App Skeleton & Widget Basics

In the Dart course every program ended in print() — text in a terminal. In Flutter the same Dart code draws a real screen, and that screen is built from small pieces called widgets.

Contents

Prerequisites · Connection · Objectives · Lesson · Code Examples · Common Mistakes · Best Practices · Mini Challenge · Practice Questions · Answers · Takeaways

Every screenshot and error message in this lecture is real. Each app was run on Flutter 3.44, and each error was produced by the code shown, so you will recognize it when you meet it yourself.

#Prerequisites

Students should already understand, from the Dart course:

• variables, String, int, double and string interpolation ('$name')
• functions, including main() and arrow functions (=>)
• classes, constructors, named parameters and super
• const and final

You also need Flutter installed (flutter doctor passes), an editor, and an emulator, phone, or Chrome to run the app.

#Connection With Previous Lectures

In the Dart course, the result of every program was text in a terminal:

void main() {
  print('Hello, Ali');
}

A phone app cannot work like this. Users never see a terminal — they see a title bar, text, buttons and colors. We need a way to describe a screen in Dart and have something draw it. That is exactly what Flutter does: you describe the screen with widgets, and Flutter paints them.

#Learning Objectives

By the end of this lecture you will be able to:

• Explain what a widget is and why Flutter apps are trees of widgets
• Start an app with main() and runApp()
• Use MaterialApp as the root of a Material Design app
• Build a screen with Scaffold, AppBar and body
• Show text with the Text widget and center it with Center
• Write your own StatelessWidget with a build() method
• Set a theme color, hide the debug banner, and add a FloatingActionButton
• Use hot reload to see changes instantly

#1. Everything Is a Widget

A widget is a description of one piece of the screen: a piece of text, a title bar, some empty space, a button. Flutter apps are made by putting widgets inside other widgets.

Analogy — think of LEGO bricks. Each brick is simple on its own, but bricks snap together into bigger shapes, and those shapes snap together into a whole model. A Flutter screen is a model built from widget bricks.

Widgets are ordinary Dart objects. Text('Hello') creates an object of the class Text, exactly like Student('Ali') created a Student in the Dart course.

#2. runApp() — Showing the First Widget

Every Flutter app still starts in main(). Instead of print(), we call runApp() and give it the widget that should fill the screen.

void main() {
  runApp(const MaterialApp(home: Text('Hello, Flutter!')));
}

It works — but it looks broken. The text is huge, red, double-underlined, and hidden under the phone's status bar. Flutter does this on purpose: a Text that is not placed inside a proper screen widget has no style to follow, so Flutter paints a loud warning style. The next step fixes it.

#3. MaterialApp — The Root of the App

MaterialApp is the widget that sits at the very top of almost every app. It sets up the things an app needs: the theme, the text direction, navigation between screens, and Material Design (Google's design system that Flutter's built-in widgets follow).

Its home parameter is the first screen the user sees. Notice that home takes a widget — any widget at all.

#4. Scaffold, AppBar and body

Scaffold is the widget for one screen. It has named slots for the usual parts of a screen: appBar for the title bar at the top, and body for the main content.

return MaterialApp(
  home: Scaffold(
    appBar: AppBar(title: const Text('My First App')),
    body: const Center(child: Text('Hello, Flutter!')),
  ),
);

Three things changed:

• Scaffold gives the text a proper style — normal size, dark color, no underline.
• AppBar draws the title bar. Its title is again a widget: Text('My First App').
• Center takes one child and places it in the middle of the space it has.

Read it from the outside in: the app has a home screen; the screen has a title bar and a body; the body centers some text. This nesting is called the widget tree.

MaterialApp
└── Scaffold
    ├── AppBar
    │   └── Text('My First App')
    └── Center
        └── Text('Hello, Flutter!')

#5. Your Own Widget: StatelessWidget

Writing the whole app inside main() does not scale. Instead we write our own widget class. A widget that only displays things — and never changes by itself — extends StatelessWidget:

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(
      home: Scaffold(
        appBar: AppBar(title: const Text('My First App')),
        body: const Center(child: Text('Hello, Flutter!')),
      ),
    );
  }
}

How to read this class:

• class MyApp extends StatelessWidget — MyApp is a widget, built on Flutter's StatelessWidget class.
• const MyApp({super.key}); — a const constructor. key is an optional value every widget can receive; we pass it up to the parent class and will not need it in this course.
• build(BuildContext context) — Flutter calls this method whenever it needs to draw the widget. It returns the widget tree for this part of the screen. @override says we are replacing the build method that StatelessWidget declares.
• context tells the widget where it sits in the tree. We will use it in later lectures.

This shape — class, const constructor, build() — is the shape of every widget you write.

#6. const Widgets and Hot Reload

You noticed many const keywords. A const widget is created once, at compile time, and reused every time build() runs. That makes apps faster. When every value inside a widget is a fixed value, put const in front of it. If you put const somewhere it is not allowed, the editor reports an error, so you cannot get it wrong silently.

Now run the app (flutter run, or the Run button) and change 'Hello, Flutter!' to 'Hello, Sara!'. Save the file. The screen updates in about a second and the app keeps running — that is hot reload. It re-runs your build() methods with the new code. If you change main() itself, use hot restart (capital R in the terminal) instead.

#7. Title, Debug Banner and Theme

The red DEBUG ribbon in the top-right corner reminds you that this is a debug build. Two lines in MaterialApp clean it up:

debugShowCheckedModeBanner: false,
title: 'My First App',

title is the app's name used by the operating system (for example in the Android recent-apps list). It is not drawn on the screen.

A theme gives the whole app one color style. The quickest way is a seed color — Flutter builds a complete, matching color scheme from that one color:

theme: ThemeData(colorSchemeSeed: Colors.indigo),

The AppBar can also take its own colors and center its title:

appBar: AppBar(
  title: const Text('My First App'),
  centerTitle: true,
  backgroundColor: Colors.indigo,
  foregroundColor: Colors.white,
),

backgroundColor paints the bar; foregroundColor colors the title and any icons on it.

#8. FloatingActionButton

Scaffold has more slots than appBar and body. The floatingActionButton slot holds the round-cornered button that floats in the bottom-right corner — used for the screen's main action, like "add a note".

floatingActionButton: FloatingActionButton(
  onPressed: () {},
  child: const Icon(Icons.add),
),

onPressed is the function that runs when the button is tapped. () {} is an empty function — the button works but does nothing yet. Icon(Icons.add) draws the plus sign; icons get a full section in Lecture 006.

#9. Splitting the App Into Screens

MyApp should set up the app; each screen should be its own widget. Then home simply names the screen:

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(colorSchemeSeed: Colors.indigo),
      home: const HomeScreen(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Home')),
      body: const Center(child: Text('This screen is its own widget.')),
    );
  }
}

Because HomeScreen has a const constructor, home: const HomeScreen() can be const too. Every app in this course follows this layout: MyApp at the top, one class per screen below it.

#10. Dart Inside build()

build() is a normal Dart method, so everything from the Dart course works inside it. Create variables before the return, then use them in the widgets:

String name = 'Ali';
int marks = 240;

return Scaffold(
  appBar: AppBar(title: const Text('Result')),
  body: Center(child: Text('$name scored $marks marks')),
);

Notice that Text(...) around '$name scored $marks marks' is not const — its value depends on variables, so it cannot be fixed at compile time. Center loses its const for the same reason.

#11. A Real-World Example

Sara wants a notes app. Here is its first screen — it uses every idea from this lecture: main() and runApp(), MaterialApp with a title and theme, a screen class, variables in build(), an AppBar, a centered Text, and a FloatingActionButton.

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,
      title: 'Notes',
      theme: ThemeData(colorSchemeSeed: Colors.teal),
      home: const NotesScreen(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    String owner = 'Sara';
    int noteCount = 0;

    return Scaffold(
      appBar: AppBar(
        title: Text("$owner's Notes"),
        backgroundColor: Colors.teal,
        foregroundColor: Colors.white,
      ),
      body: Center(child: Text('You have $noteCount notes.')),
      floatingActionButton: FloatingActionButton(
        onPressed: () {},
        child: const Icon(Icons.add),
      ),
    );
  }
}

The AppBar title uses double quotes because the text contains an apostrophe: "$owner's Notes".

#Code Examples

#Example 1 — The Smallest Proper App

A MaterialApp, one Scaffold, and centered text. Because every value is fixed, the whole tree can be const.

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: Scaffold(body: Center(child: Text('Hello, Flutter!'))),
    );
  }
}

#Example 2 — A Title Bar

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(
        appBar: AppBar(title: const Text('Welcome'), centerTitle: true),
        body: const Center(child: Text('Welcome to Flutter, Sara!')),
      ),
    );
  }
}

#Example 3 — One Seed Color for the Whole App

The seed color tints the background, the title bar and the floating button in matching shades.

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,
      theme: ThemeData(colorSchemeSeed: Colors.deepOrange),
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Orange Theme'),
          backgroundColor: Colors.deepOrange,
          foregroundColor: Colors.white,
        ),
        body: const Center(
          child: Text('The whole app follows one seed color.'),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () {},
          child: const Icon(Icons.edit),
        ),
      ),
    );
  }
}

#Example 4 — Student Report

Calculation happens in build(), the result appears on screen.

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,
      theme: ThemeData(colorSchemeSeed: Colors.blue),
      home: const ReportScreen(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    String name = 'Ali';
    int math = 80;
    int science = 75;
    int english = 85;
    int total = math + science + english;

    return Scaffold(
      appBar: AppBar(title: const Text('Student Report')),
      body: Center(child: Text('$name: $total out of 300')),
    );
  }
}

#Example 5 — Shopping Total

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,
      theme: ThemeData(colorSchemeSeed: Colors.green),
      home: const CartScreen(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    int pricePerItem = 250;
    int quantity = 3;
    int total = pricePerItem * quantity;

    return Scaffold(
      appBar: AppBar(title: const Text('Shopping Cart')),
      body: Center(child: Text('$quantity items · Total: Rs. $total')),
      floatingActionButton: FloatingActionButton(
        onPressed: () {},
        child: const Icon(Icons.shopping_cart),
      ),
    );
  }
}

#Example 6 — Bank Balance

A double prints with a decimal point, exactly as in the Dart course: 25000 shows as 25000.0.

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,
      title: 'Bank',
      theme: ThemeData(colorSchemeSeed: Colors.indigo),
      home: const BalanceScreen(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    String owner = 'Zayan';
    double balance = 25000;

    return Scaffold(
      appBar: AppBar(
        title: Text("$owner's Account"),
        backgroundColor: Colors.indigo,
        foregroundColor: Colors.white,
      ),
      body: Center(child: Text('Balance: Rs. $balance')),
    );
  }
}

#Common Beginner Mistakes

1. Forgetting the Scaffold

void main() {
  runApp(const MaterialApp(home: Text('Hello, Flutter!')));
}

Big red text with a yellow double underline means "this text is not inside a screen". Wrap the content in a Scaffold.

2. Misspelling a widget name

import 'package:flutter/material.dart';

void main() {
  runApp(const MaterialApp(home: Scafold(body: Text('Hello'))));
}

error • Invalid constant value • lib/main.dart:4:34 • invalid_constant
error • The function 'Scafold' isn't defined. Try importing the library that defines 'Scafold', correcting the name to the name of an existing function, or defining a function named 'Scafold' • lib/main.dart:4:34 • undefined_function

Widget names are class names — they are case-sensitive and must be spelled exactly. Dart does not know a class called Scafold, so it reads the name as a call to an unknown function, and the const in front cannot be checked either — two errors from one typo.

3. Giving home a String instead of a widget

import 'package:flutter/material.dart';

void main() {
  runApp(const MaterialApp(home: 'Hello, Flutter!'));
}

error • A value of type 'String' can't be assigned to a parameter of type 'Widget?' in a const constructor. Try using a subtype, or removing the keyword 'const' • lib/main.dart:4:28 • const_constructor_param_type_mismatch
error • The argument type 'String' can't be assigned to the parameter type 'Widget?'.  • lib/main.dart:4:34 • argument_type_not_assignable

Slots like home, title and body take widgets. Wrap the text: home: Text('...') — better still, home: Scaffold(body: Text('...')).

4. Forgetting return in build()

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    MaterialApp(home: Scaffold(body: Text('Hello')));
  }
}

error • The body might complete normally, causing 'null' to be returned, but the return type, 'Widget', is a potentially non-nullable type. Try adding either a return or a throw statement at the end • lib/main.dart:11:10 • body_might_complete_normally

Creating a widget is not enough; build() must return it.

5. Putting a parameter on the wrong widget

import 'package:flutter/material.dart';

void main() {
  runApp(const MaterialApp(home: Scaffold(title: Text('Hello'))));
}

error • The named parameter 'title' isn't defined. Try correcting the name to an existing named parameter's name, or defining a named parameter with the name 'title' • lib/main.dart:4:43 • undefined_named_parameter

title belongs to AppBar (or MaterialApp), not to Scaffold. Press Ctrl+Space inside a widget's parentheses to list the parameters it really has.

6. A missing semicolon after runApp(...)

import 'package:flutter/material.dart';

void main() {
  runApp(const MaterialApp(home: Scaffold(body: Text('Hello'))))
}

error • Expected to find ';' • lib/main.dart:4:64 • expected_token

Long, nested widget code makes it easy to lose a ; or a ). Format the file (Shift+Alt+F in VS Code, Ctrl+Alt+L in Android Studio) — the indentation shows where the brackets really close.

#Best Practices

• Keep main() to one line: runApp(const MyApp());.
• Put each screen in its own StatelessWidget class, named after what it shows (ReportScreen, CartScreen).
• Add const to every widget whose values are all fixed.
• End every argument list with a trailing comma — the formatter then puts one widget per line and the tree stays readable.
• Set debugShowCheckedModeBanner: false and a seed color once, in MaterialApp.
• Use hot reload constantly: change a value, save, look.

#Mini Challenge

Build a weather screen for Lahore. Store the city ('Lahore') and the temperature in Celsius (30, as a double) in variables, convert it to Fahrenheit (celsius * 9 / 5 + 32), and show:

• a light-blue title bar with the centered white title Weather
• the text Lahore: 30.0°C (86.0°F) in the middle of the screen
• a floating button with Icons.refresh
• no debug banner

Try it yourself before opening the solution.

Show solution

dartCopy

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,
      title: 'Weather',
      theme: ThemeData(colorSchemeSeed: Colors.lightBlue),
      home: const WeatherScreen(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    String city = 'Lahore';
    double celsius = 30;
    double fahrenheit = celsius * 9 / 5 + 32;

    return Scaffold(
      appBar: AppBar(
        title: const Text('Weather'),
        centerTitle: true,
        backgroundColor: Colors.lightBlue,
        foregroundColor: Colors.white,
      ),
      body: Center(child: Text('$city: $celsius°C ($fahrenheit°F)')),
      floatingActionButton: FloatingActionButton(
        onPressed: () {},
        child: const Icon(Icons.refresh),
      ),
    );
  }
}

How it works

1. MyApp sets the theme and hides the banner; WeatherScreen is the only screen.
2. build() calculates fahrenheit from celsius before returning the tree.
3. The AppBar gets its colors and centerTitle: true; the body centers the interpolated text.
4. The button's onPressed is empty for now — tapping it does nothing yet.

#Practice Questions

Work through these in order — they run from beginner to application to challenge.

Beginner

1. Build an app with a Scaffold (no AppBar) that shows Hello, Zayan in the center.
2. Add an AppBar with the centered title My First App and the body text Lecture 001 complete.
3. Remove the debug banner, use Colors.green as the seed color, and title the bar Green App.

Application

4. Build a Tasks screen whose body says No tasks yet. and which has a floating button with Icons.add.
5. Split an app into MyApp and a ProfileScreen class. The profile screen has the title Profile and shows Name: Sara.
6. Store city = 'Karachi' and temperature = 34 in variables and show Karachi: 34°C.
7. Store price = 150 and quantity = 5, calculate the total in build(), and show Total: Rs. 750 on a screen titled Bill.

Challenge

8. Ali has a balance of 5000 and deposits 1500. Build a Deposit screen with a teal title bar (white title) that shows Ali's balance after deposit: Rs. 6500 and a floating button with Icons.add.

#Practice Answers

#Question 1 — Solution

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: Scaffold(body: Center(child: Text('Hello, Zayan'))),
    );
  }
}

#Question 2 — Solution

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(
      home: Scaffold(
        appBar: AppBar(title: const Text('My First App'), centerTitle: true),
        body: const Center(child: Text('Lecture 001 complete')),
      ),
    );
  }
}

#Question 3 — Solution

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,
      theme: ThemeData(colorSchemeSeed: Colors.green),
      home: Scaffold(
        appBar: AppBar(title: const Text('Green App')),
        body: const Center(child: Text('No debug banner here.')),
      ),
    );
  }
}

#Question 4 — Solution

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(
        appBar: AppBar(title: const Text('Tasks')),
        body: const Center(child: Text('No tasks yet.')),
        floatingActionButton: FloatingActionButton(
          onPressed: () {},
          child: const Icon(Icons.add),
        ),
      ),
    );
  }
}

#Question 5 — Solution

home: ProfileScreen() can be const because ProfileScreen has a const constructor — the const in front of MaterialApp covers it.

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: ProfileScreen(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Profile')),
      body: const Center(child: Text('Name: Sara')),
    );
  }
}

#Question 6 — Solution

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: TemperatureScreen(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    String city = 'Karachi';
    int temperature = 34;

    return Scaffold(
      appBar: AppBar(title: const Text('Temperature')),
      body: Center(child: Text('$city: $temperature°C')),
    );
  }
}

#Question 7 — Solution

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: BillScreen(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    int price = 150;
    int quantity = 5;
    int total = price * quantity;

    return Scaffold(
      appBar: AppBar(title: const Text('Bill')),
      body: Center(child: Text('Total: Rs. $total')),
    );
  }
}

#Question 8 — Solution

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,
      theme: ThemeData(colorSchemeSeed: Colors.teal),
      home: const DepositScreen(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    String owner = 'Ali';
    int balance = 5000;
    int deposit = 1500;
    int newBalance = balance + deposit;

    return Scaffold(
      appBar: AppBar(
        title: const Text('Deposit'),
        backgroundColor: Colors.teal,
        foregroundColor: Colors.white,
      ),
      body: Center(
        child: Text("$owner's balance after deposit: Rs. $newBalance"),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {},
        child: const Icon(Icons.add),
      ),
    );
  }
}

#Quick Revision

1. What is a widget?
2. Which function puts the first widget on the screen?
3. What does MaterialApp's home parameter hold?
4. Name three slots of a Scaffold.
5. What does Center do with its child?
6. Which method of a StatelessWidget returns its widget tree?
7. Why can Text('$name') not be const?
8. What is the difference between hot reload and hot restart?

#Key Takeaways

• A Flutter screen is a tree of widgets; each widget is a Dart object.
• main() calls runApp() with the root widget — usually MaterialApp.
• MaterialApp sets up the app (theme, title, banner); its home is the first screen.
• Scaffold is one screen: appBar, body, floatingActionButton.
• Text outside a Scaffold gets a red, underlined warning style.
• Your own widgets extend StatelessWidget and return their tree from build().
• Use const for widgets whose values never change; hot reload shows changes instantly.

#What's Next?

Lecture 002 — Single-Child Layout Widgets. So far Center was our only way to place something. Next we learn the widgets that position and size one child — Padding, Align, SizedBox, AspectRatio and more — so content stops sticking to the edges of the screen.