Create a Flutter App — Flutter Mastery

🧒 What Are We Building Today? (Explained Simply!)

🏗️

Imagine You're Building With LEGO Blocks...

In Flutter, everything is a widget — just like how everything in LEGO is a brick. A button is a widget. Text is a widget. A row of icons is a widget. Even the entire screen is a widget!

Your job as a Flutter developer is to snap these widget-bricks together to build beautiful apps. Today, you'll build your very first app — a word-guessing game called "Birdle" (like Wordle, but for bird names! 🐦).

🎮

By the end of this lesson, you will:

✅ Create a brand new Flutter project from scratch
✅ Understand what the "widget tree" is
✅ Run your app in a web browser
✅ Use "hot reload" to see changes instantly (it's magic! ✨)

🌳

The Widget Tree — A Family Tree for Your App

Think of your app like a family tree. At the very top, you have the great-grandparent (the root widget). Below that, you have grandparents, then parents, then children.

In Flutter, this is called the "widget tree". Here's what a simple one looks like:

🌳 MaterialApp The root — sets up the whole app

│

🏠 Scaffold Gives structure: app bar, body, etc.

│

📦 Center Puts its child in the middle

│

📝 Text Shows words on screen

Each widget "contains" the widget below it, like Russian nesting dolls. MaterialApp → Scaffold → Center → Text. That's your widget tree!

⚡

Hot Reload — The Closest Thing to Magic in Programming

Normally, when you change code, you have to stop the app, rebuild it, and restart it just to see your change. That's like baking a whole new cake just to add one more sprinkle! 🎂

Hot reload lets you change your code and see the result in less than a second — without stopping your app. It's like having a magic wand that instantly updates your app while it's running!

💡

How to use hot reload: While your app is running, press the r key in the terminal. That's it! Your app updates instantly. No restarting, no waiting. It's the #1 reason developers love Flutter!

1 Create a New Flutter Project

The first step to building any Flutter app is creating a new project. A "project" is just a folder on your computer that contains all the files Flutter needs. We'll create one using the terminal — don't worry, it's just one command!

Step 1.1 Open Your Terminal

First, open your terminal (or Command Prompt on Windows):

Windows: Press Windows Key, type "cmd", press Enter
macOS: Press Cmd + Space, type "Terminal", press Enter
Linux: Press Ctrl + Alt + T
Or in VS Code: Go to Terminal → New Terminal in the top menu

Step 1.2 Run the Create Command

In your terminal, type this command and press Enter. This tells Flutter: "Create a new app called 'birdle' with the minimal empty template."

Terminal — Create a Flutter Project

~ $ flutter create birdle --empty

Creating project birdle...
Resolving dependencies in `birdle`...
Downloading packages...
Got dependencies in `birdle`.
✓ Wrote 13 files.

All done! You can now run your app with:
cd birdle
flutter run -d chrome

💡

What does --empty mean? Normally, Flutter creates a project with lots of example code (like a counter app). The --empty flag tells Flutter: "Give me a clean slate — just the bare minimum files." This is perfect for learning because we'll build everything ourselves!

📁

What just happened? Flutter created a folder called birdle in whatever folder your terminal was in. Inside, it created all the files a Flutter app needs. You just created your first Flutter project! 🎉

2 Look at the Code — What's Inside?

Now let's open the project and look at the code Flutter created for us. Even though it's an "empty" project, there's still some important code we need to understand.

Step 2.1 Open the Project in VS Code

Open VS Code
Go to File → Open Folder
Find and select the birdle folder that Flutter just created
Click "Open"

Once opened, look at the file explorer on the left. Find and click on lib/main.dart. This is the main file of your app — everything starts here!

Step 2.2 Understanding `main.dart` — Line by Line

Here's the code you'll see. Let me explain every single part like you're 5 years old:

Part 1: The Starting Point 🚀

lib/main.dart

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

What this means in plain English:

void main() — "Hey computer, this is where the program starts!" Every Dart program begins with a main function. It's like the front door of your app.
runApp() — "Take this widget and show it on the screen!" This is a special Flutter command that takes whatever widget you give it and makes it fill the entire screen.
MainApp() — This is the widget being passed in. It's like saying: "Here's my app design — display it!"

Part 2: The App Itself 🏠

lib/main.dart (continued)

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

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

What this means in plain English:

class MainApp extends StatelessWidget — "I'm creating a new type of widget called MainApp. It's a stateless widget, meaning it doesn't change — it's like a painting on the wall."
build() — "When it's time to show this widget, here's what it should look like." Every widget must have a build method.
MaterialApp — "Use Google's Material Design style (the same style used by Android apps)." This sets up navigation, theming, and more.
Scaffold — "Give me a basic app structure." A Scaffold is like the skeleton of a screen — it has places for an app bar, a body, buttons, etc.
Center — "Put whatever's inside me right in the middle of the screen."
Text('Hello World!') — "Show the words 'Hello World!' on the screen."

🧩

The Widget Tree for this code:
MaterialApp → Scaffold → Center → Text('Hello World!')

Read it like: "The MaterialApp contains a Scaffold, which contains a Center, which contains Text that says 'Hello World!'"

3 Run Your App — See It Come Alive!

Now the exciting part — let's actually run your app and see it in a web browser!

Step 3.1 Navigate to Your Project Folder

In your terminal, you need to "go into" the birdle folder:

Terminal — Navigate to Project

~ $ cd birdle

# "cd" means "change directory" — it's like

# clicking on a folder to open it

~/birdle $ # Notice the prompt changed — you're now inside the birdle folder!

Step 3.2 Launch Your App!

Now run this command to start your app in a Chrome browser window:

Terminal — Run the App

~/birdle $ flutter run -d chrome

Launching lib/main.dart on Chrome in debug mode...
Waiting for connection from debug service on Chrome...
This app is linked to the debug service: ws://127.0.0.1:...
Debug service listening on ws://127.0.0.1:...

✓ Built build/web/...

Flutter run key commands:
r Hot reload. 🔥
R Hot restart.
q Quit.

🎉

A Chrome window should have opened! You should see a white screen with the words "Hello World!" in the center. That's your app! It might not look like much yet, but this is a real, running Flutter application. You built this!

💡

What does -d chrome mean? The -d stands for "device." You're telling Flutter: "Run this app on Chrome (the web browser)." You could also use -d windows, -d macOS, -d android, or -d ios depending on what you have set up.

4 Hot Reload — Change Code Instantly!

This is the coolest part of Flutter. You're going to change the code and see the update happen instantly — without restarting anything!

Step 4.1 Make a Change to the Text

Keep your app running in Chrome — don't close it!
Go back to VS Code and open lib/main.dart
Find this line (around line 15):

Find this line in main.dart

child: Text('Hello World!'),

Change the text to anything you want! For example:

                                        
Change it to this

                                    child: Text('I made an app! 🎉'),

Step 4.2 Trigger Hot Reload — Watch the Magic!

Save the file (Ctrl+S on Windows/Linux, Cmd+S on Mac)
Go to the terminal where your app is running
Press the r key on your keyboard
Look at your Chrome window!

Terminal — Press 'r' for Hot Reload

~/birdle $ r

Performing hot reload...
✓ Hot reloaded in 0.4s!

# The app in Chrome instantly shows your new text!

# No restart needed. That's hot reload! 🔥

✨

Did you see that?! The text in your app changed instantly — in less than a second — without you having to close and reopen anything. This is why developers love Flutter. You can experiment, tweak colors, move things around, and see the results immediately. It makes learning so much faster!

🎮

Try this now: Change the text a few more times. Each time you save and press r, the app updates. Try changing 'Hello World!' to 'Flutter is awesome!' or 'My first app!' — get comfortable with the hot reload flow. It's your new superpower!

📝 What You Learned Today

Let's review everything you accomplished in this lesson. You did a lot!

✅

Created Your First Project

Used flutter create birdle --empty to scaffold a new Flutter project with the minimal template.

✅

Understood the Widget Tree

Learned that Flutter UIs are built by nesting widgets: MaterialApp → Scaffold → Center → Text.

✅

Ran Your App

Used flutter run -d chrome to launch your app in a web browser and see it working.

✅

Used Hot Reload

Changed code, pressed r, and saw the update in under a second without restarting!

🧠 Test Yourself!

Let's see what you remember! Answer these two questions:

Q1 What is the purpose of the `runApp` function in a Flutter application?

Q2 How do you trigger a hot reload while a Flutter app is running in the terminal?

📦 Project 1: Customize Your First App

Now it's your turn! Take the app you just created and make it your own.

Project 1 Beginner

Objective: Make the App Display Your Name

📋 Requirements:

Change the text from "Hello World!" to "Welcome to [Your Name]'s App!"
Use hot reload to see the change instantly
Try changing the text three more times to different messages, using hot reload each time

🎯 Expected Output:

Your app should show your custom welcome message, and you should be comfortable using hot reload.

💡

Hint: The text is inside the Text() widget. Just change the words between the quotes!

📦 Project 2: Set Up the Birdle Game Structure

Let's start building the actual Birdle game! In this project, you'll create the basic structure with a title bar and a text input hint.

Project 2 Beginner

Objective: Build the Birdle App Shell

📋 Requirements:

Change the app to show an AppBar at the top with the title "Birdle 🐦"
In the body, show a Column with two children:
- A Text that says "Guess the bird name!"
- A second Text that says "Type your guess below:"
Make the title text bold and size 28
Use hot reload to see your changes

🎯 Expected Output:

Your app should have an app bar at the top saying "Birdle 🐦", and two lines of text in the body.

💡

Hints:

Use AppBar inside Scaffold (add an appBar: parameter)
Use Column to stack multiple widgets vertically
Use fontWeight: FontWeight.bold and fontSize: 28 in a TextStyle
Remember: the widget tree will be: MaterialApp → Scaffold → AppBar + Body(Column → Text, Text)

lib/main.dart — Birdle Starter

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

    @override
    Widget build(BuildContext context) {
        return const MaterialApp(
            home: Scaffold(
                appBar: AppBar(                              // ← Added AppBar
                    title: Text('Birdle 🐦'),
                ),
                body: Padding(                               // ← Added Padding
                    padding: EdgeInsets.all(16.0),
                    child: Column(                           // ← Column stacks vertically
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                            Text(
                                'Guess the bird name!',
                                style: TextStyle(
                                    fontSize: 28,
                                    fontWeight: FontWeight.bold,
                                ),
                            ),
                            SizedBox(height: 12),   // ← Adds space
                            Text(
                                'Type your guess below:',
                                style: TextStyle(
                                    fontSize: 16,
                                ),
                            ),
                        ],
                    ),
                ),
            ),
        );
    }
}

What's new: I added Padding to give space around the edges, Column to stack texts, SizedBox for spacing between them, and crossAxisAlignment to align text to the left. You'll learn all about these in the next lesson!

🚀 What's Next?

Awesome work! You just created, ran, and modified your first Flutter app. In the next lesson, you'll dive deeper into:

Widget Fundamentals — Learn about all the different types of widgets
Understanding StatelessWidget vs StatefulWidget
How to compose complex UIs from simple widgets

Next Lesson: Widget Fundamentals →

🎉

Lesson Complete!

You've built your first Flutter app, learned about the widget tree, and mastered hot reload. You're officially a Flutter developer now!

Click the button above to track your progress!

🧒 What Are We Building Today? (Explained Simply!)

Imagine You're Building With LEGO Blocks...

The Widget Tree — A Family Tree for Your App

Hot Reload — The Closest Thing to Magic in Programming

1 Create a New Flutter Project

Step 1.1 Open Your Terminal

Step 1.2 Run the Create Command

2 Look at the Code — What's Inside?

Step 2.1 Open the Project in VS Code

Step 2.2 Understanding main.dart — Line by Line

Part 1: The Starting Point 🚀

Part 2: The App Itself 🏠

3 Run Your App — See It Come Alive!

Step 3.1 Navigate to Your Project Folder

Step 3.2 Launch Your App!

4 Hot Reload — Change Code Instantly!

Step 4.1 Make a Change to the Text

Step 4.2 Trigger Hot Reload — Watch the Magic!

📝 What You Learned Today

Created Your First Project

Understood the Widget Tree

Ran Your App

Used Hot Reload

🧠 Test Yourself!

Q1 What is the purpose of the runApp function in a Flutter application?

Q2 How do you trigger a hot reload while a Flutter app is running in the terminal?

📦 Project 1: Customize Your First App

Objective: Make the App Display Your Name

📋 Requirements:

🎯 Expected Output:

📦 Project 2: Set Up the Birdle Game Structure

Objective: Build the Birdle App Shell

📋 Requirements:

🎯 Expected Output:

🚀 What's Next?

Lesson Complete!

Step 2.2 Understanding `main.dart` — Line by Line

Q1 What is the purpose of the `runApp` function in a Flutter application?