Learn the first steps to building a Flutter app, from creating a project to understanding widgets and hot reload.

In this first section of the Flutter tutorial, you'll build the core UI of an app called 'Birdle', a game similar to Wordle, the popular New York Times game.

By the end of this tutorial, you'll have learned the fundamentals of building Flutter UIs, and your app will look like the following screenshot (and it'll even mostly work 😀).

The first step to building Flutter apps is to create a new project. You create new apps with the Flutter CLI tool, installed as part of the Flutter SDK.

Open your terminal or command prompt and run the following command to create a new Flutter project:

$ flutter create birdle --empty

This creates a new Flutter project using the minimal "empty" template.

In your IDE, open the file at lib/main.dart. Starting from the top, you'll see this code.

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

The main function is the entry point to any Dart program, and a Flutter app is just a Dart program. The runApp method is part of the Flutter SDK, and it takes a widget as an argument. In this case, an instance of the MainApp widget is being passed in.

Just below the main function, you'll find the MainApp class declaration.

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

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

MainApp is the root widget, as it's the widget that's passed into runApp. Within this widget, there's a build method that returns another widget called MaterialApp. Essentially, this is what a Flutter app is: a composition of widgets that make up a tree structure called the widget tree.

Your job as a Flutter developer is to compose widgets from the SDK into larger, custom widgets that display a UI.

At the moment, the widget tree is quite simple:

1. In your terminal, navigate to the root directory of your created Flutter app:

   $ cd birdle

2. Run the app using the Flutter CLI tool.

   $ flutter run -d chrome

   The app will build and launch in a new instance of Chrome.

Stateful hot reload, if you haven't heard of it, allows a running Flutter app to re-render updated business logic or UI code in less than a second – all without losing your place in the app.

In your IDE, open the main.dart file and navigate to line ~15 and find this code:

child: Text('Hello World!'),

Change the text inside the string to anything you want. Then, hot-reload your app by pressing r in the terminal where the app is running. The running app should instantly show your updated text.