First Flutter App

This section will cover how to use the Flutter CLI to create a new Flutter project, run the app, and understand the most basic code structure.

Use the Flutter CLI to create a project.

Flutter CLI is Flutter's command-line tool for creating, managing, and building Flutter projects.

Create New Project

Run the following command in the terminal to create a new Flutter project:

$ flutter create my_first_app

wheremy_first_appIs your project name. Flutter will create the corresponding folders and files based on this name.

The project name must use lowercase letters and underscores, and cannot contain spaces or special characters.

Command Parameters

flutter createThe command supports multiple parameters:

$ flutter create hello_world
Creating project "hello_world"...
  .gitignore                    2026-04-01 10:30:22
  .metadata                     2026-04-01 10:30:22
  analysis_options.yaml         2026-04-01 10:01:15
  pubspec.yaml                  2026-04-01 10:30:22
  README.md                     2026-04-01 10:30:22
  lib/
    main.dart                    2026-04-01 10:30:22
  test/
    widget_test.dart             2026-04-01 10:22:34
  android/
  ios/
  web/
  ...
Running "flutter pub get"...                     13.2s
Running "flutter analyze"...                     3.2s

Run Flutter application

Start development server

After the project is created, enter the project directory and run the app:

$ cd hello_world
$ flutter run

The first run may take some time, because Flutter needs to compile the Dart code and launch the app.

Specify running device

If your computer is connected to multiple devices (or emulators), you can use-dParameter specifies running device:

View available devices

Run the following command to view all available running devices:

$ flutter devices

Output example:

2 connected devices:
Chrome (web)      • chrome           • web-javascript • Chrome  • web
Windows (windows) • windows          • windows        • x64    • Windows 10.0.0

Hot Reload Feature

One of Flutter's most powerful features is Hot Reload. While you are running the app:

1. Modify code and save
2. In the terminal, pressrKey
3. The app will reload, and you can see the latest changes

Hot reload is very fast, usually taking only one or two seconds. This greatly improves development efficiency, allowing you to preview the interface in real time.

Hot reload does not lose the application state, which means you can quickly iterate on UI designs without restarting the application.

main.dart file analysis.

Every Flutter project has an entry filelib/main.dartLet's take a look at the default generated content:

Example: main.dart code

// lib/main.dart
// Entry file of the Flutter application

// Import Material Design component library
import 'package:flutter/material.dart';

// Application entry function
void main() {
  // runApp is Flutter's startup function
  // It receives a Widget as the root widget
  runApp(const MyApp());
}

// Root Widget (stateless widget)
class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    // MaterialApp is the root widget of Material Design style
    return MaterialApp(
      // Set application title
      title: 'Flutter Demo',
      // Set theme color
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        // Use Material 3
        useMaterial3: true,
      ),
      // Application's main page
      home: const MyHomePage(title: 'Flutter Home'),
    );
  }
}

// Stateful widget (can have internal state)
class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  // Page title (immutable)
  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  // Counter state
  int _counter = 0;

  // Method to increment the counter
  void _incrementCounter() {
    // setState notifies Flutter that the state has changed and the UI needs to be rebuilt
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    // Scaffold is the page scaffold of Material Design
    return Scaffold(
      // AppBar is the top app bar
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        // Display page title
        title: Text(widget.title),
      ),
      // Page body content
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Text('How many times have you clicked the button:'),
            // Display counter value
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
          ],
        ),
      ),
      // Floating action button
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increase',
        child: const Icon(Icons.add),
      ),
    );
  }
}

Code structure explanation