Flutter Lesson 3 of 83 3 min read

Create and Run Your First Flutter App

Create a new Flutter project with flutter create, run it on a device or in Chrome, and make your first changes to the counter app.

On this page

Create the project #

flutter create my_first_app
cd my_first_app

Project names are lower case with underscores. Two useful options:

flutter create --org com.yourname my_first_app   # sets the app id prefix
flutter create --empty my_first_app              # a minimal starting point

Run it #

flutter run

With several devices available, Flutter asks which to use. Or choose directly:

flutter run -d chrome

The first build takes a few minutes. Then the starter counter app appears. In VS Code, press F5 instead.

A simpler starting point #

The generated lib/main.dart has a lot of comments. Replace it with this shorter version of the same app.

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(
      title: 'My First App',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.blue),
      ),
      home: const CounterPage(),
    );
  }
}

class CounterPage extends StatefulWidget {
  const CounterPage({super.key});

  @override
  State<CounterPage> createState() => _CounterPageState();
}

class _CounterPageState extends State<CounterPage> {
  int _count = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Counter')),
      body: Center(
        child: Text(
          'You pressed the button $_count times',
          style: Theme.of(context).textTheme.titleLarge,
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => setState(() => _count++),
        child: const Icon(Icons.add),
      ),
    );
  }
}

What each part does #

Code	Meaning
`runApp(...)`	Puts a widget on the screen. Every app starts here
`MyApp`	The root widget. It never changes, so it is a `StatelessWidget`
`CounterPage`	Holds a number that changes, so it is a `StatefulWidget`
`_count`	The state: data that can change while the app runs
`setState(...)`	Changes the state and tells Flutter to redraw
`build`	Describes what the screen looks like for the current state

The idea to hold on to: you never change the screen directly. You change the state, and build runs again to describe the new screen.

Make it yours #

Try each change and save. The app updates almost instantly.

Change Colors.blue to Colors.deepOrange.
Change the text to 'Taps: $_count'.
Add a second button that subtracts. Replace the floatingActionButton with:

floatingActionButton: Row(
  mainAxisAlignment: MainAxisAlignment.end,
  children: [
    FloatingActionButton(
      onPressed: () => setState(() => _count--),
      child: const Icon(Icons.remove),
    ),
    const SizedBox(width: 12),
    FloatingActionButton(
      onPressed: () => setState(() => _count++),
      child: const Icon(Icons.add),
    ),
  ],
),

Commands you will use every day #

Command	Purpose
`flutter run`	Run in debug mode
`flutter pub add <package>`	Add a package
`flutter pub get`	Download packages
`flutter analyze`	Check the code
`flutter test`	Run tests
`flutter clean`	Delete build output. Fixes many odd build errors

Try it yourself #

Add a reset button to the app bar: give AppBar an actions list containing an IconButton with Icons.refresh that sets _count to 0.