Flutter Tutorial: Learn Flutter from Beginner to Expert

Build real Android, iOS, web and desktop apps, master every state management approach, and make 2D games with Flame. 135 short lessons with easy examples you can run and edit right in your browser.

Start learning Flutter See the roadmap Open the playground

Current stable Flutter, Dart 3 and Material 3. Free, no sign-up.

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(
      body: Center(child: Text('Taps: $count')),
      floatingActionButton: FloatingActionButton(
        onPressed: () => setState(() => count++),
        child: const Icon(Icons.add),
      ),
    );
  }
}

Result

A screen with a number that goes up
every time you tap the + button.

class Ball extends CircleComponent {
  Ball() : super(radius: 20, anchor: Anchor.center);

  final velocity = Vector2(200, 150);

  @override
  void update(double dt) {
    super.update(dt);
    position += velocity * dt; // move every frame
  }
}

class MyGame extends FlameGame {
  @override
  Future<void> onLoad() async {
    world.add(Ball());
  }
}

Result

A ball moving across the screen at
60 frames per second, built with Flame.

Path 1 Build apps Beginner to expert Widgets, layout, navigation, forms, APIs, Firebase, animations, testing and publishing. Path 2 State management 9 built-in tools, 20 packages setState to Riverpod, Bloc, Provider, GetX, MobX, Signals, Redux and more, with one example each. Path 3 Make games Flame engine + 5 full games Game loop, sprites, input, collisions, physics and sound, then build Snake, a shooter and more.

The complete Flutter course

20 chapters in order, from your first widget to apps and games in the stores. New to programming? Learn the basics of Dart first.

1
Getting Started with Flutter
What Flutter is, how to install it, and how to create, run and understand your first app.
6 lessons · Beginner
2
Widgets
The building blocks of every Flutter screen: stateless and stateful widgets, the widget lifecycle, text, buttons, images and containers.
8 lessons · Beginner
3
Layout
Arrange widgets on screen with rows, columns, stacks, lists and grids, and understand how Flutter decides sizes.
8 lessons · Beginner
4
Material Design and App Structure
Build complete screens with Scaffold, app bars, navigation bars, drawers, tabs, cards, dialogs and themes.
6 lessons · Beginner
5
User Input and Forms
Collect input with text fields, validated forms, checkboxes, switches, sliders, pickers and gestures.
5 lessons · Beginner
6
Navigation and Routing
Move between screens, pass data back and forth, and set up URL-based routing with go_router.
4 lessons · Intermediate
7
Built-in State Management
Learn Flutter state management without packages: setState, ValueNotifier, ChangeNotifier, InheritedWidget, InheritedNotifier, InheritedModel and builders.
8 lessons · Intermediate
8
State Management Packages
Every popular Flutter state management package with the same easy counter example: Provider, Riverpod, Bloc, Cubit, GetX, MobX, Signals, Redux and more.
17 lessons · Intermediate
9
Async UI and Networking
Show data that arrives later: FutureBuilder, StreamBuilder, HTTP requests, JSON models, loading and error states, and pagination.
6 lessons · Intermediate
10
Storing Data
Keep data on the device with shared_preferences, files and SQLite, and in the cloud with Firebase.
4 lessons · Intermediate
11
Animations
Bring an app to life with implicit and explicit animations, hero transitions, custom page routes and custom painting.
4 lessons · Intermediate
12
Responsive and Adaptive Design
Make one app look right on small phones, large phones, tablets, foldables, desktops and the web.
4 lessons · Advanced
13
Device Features and Plugins
Use the camera, gallery, location, links, sharing and other native features through plugins, and call native code yourself.
4 lessons · Advanced
14
Testing, Debugging and Quality
Test your widgets, find bugs with DevTools, keep the app fast, and make it usable in every language and by everyone.
7 lessons · Advanced
15
App Architecture and Patterns
Organise a growing Flutter app: folder structure, MVC, MVVM, MVI, Clean Architecture, repositories, dependency injection and environment configuration.
6 lessons · Advanced
16
Building and Releasing
Prepare an app for release: icon, splash screen and name, then build and publish for Android, iOS, web and desktop, and automate it.
5 lessons · Advanced
17
Flutter Game Development with Flame
Make 2D games with Flutter and Flame: game loop, components, input, collisions, sprites, camera, effects, sound, physics, tile maps and publishing.
16 lessons · Intermediate
18
Flutter Game Projects
Five complete Flutter games built with Flame, each one file you can run in the browser: Snake, Flappy Bird, Space Shooter, Brick Breaker, Endless Runner.
5 lessons · Intermediate
19
Flutter App Projects
Flutter projects with source code you can run in the browser: calculator, BMI, to-do, quiz, weather app, notes (Riverpod), cart (Provider), expenses (Bloc).
8 lessons · Intermediate
20
Flutter Next Steps
Practice projects, interview questions and a cheat sheet to turn what you have learned into real skill.
4 lessons · Advanced

A complete Flutter course, from beginner to expert

This Flutter tutorial teaches you to build apps and games with Flutter, step by step. It starts with your first widget and goes all the way to publishing on Google Play and the App Store. Each lesson explains one idea in simple English, shows it in a short example, and ends with an exercise. Most examples run right in your browser: press Run, change the code, and see the result.

New here? Follow the Flutter roadmap, or warm up with Dart for Flutter first.

What you will learn

Flutter basics: installing Flutter, widgets, layout with Row, Column and Stack, lists, grids, Material 3 design, forms and navigation.
State management, all of it: the nine built-in tools (setState, ValueNotifier, ChangeNotifier, InheritedWidget and more) and 20 packages including Riverpod, Bloc and Cubit, Provider, GetX, MobX, Flutter Hooks, Signals and Redux, each with the same easy example so you can compare them.
Real app skills: HTTP and JSON, Firebase, local storage, animations, responsive design for phones, tablets and desktop, testing, architecture (MVC, MVVM, MVI, Clean Architecture) and release.
Game development: the Flame engine, from the game loop to sprites, collisions, physics, sound and tile maps.
Projects: complete apps (calculator, to-do, quiz, weather, notes, shopping cart, expense tracker) and complete games, all with source code you can run.

Which state management should you learn?

Rank	State management	Best for
1	Riverpod	Modern apps, APIs, scalable architecture
2	BLoC / Cubit	Large apps, complex business logic, structured teams
3	Provider	Beginners and small-to-medium apps
4	GetX	Quick development and reactive state management

See all 20 packages in Flutter state management packages compared.

How to use this site

Go through the chapters in order the first time. Run every example and change it: that is where the learning happens. Use the search box (press /) to jump to any widget or package. Mark lessons as done to track your progress; it is saved only in your own browser.

Learners use this Flutter course from the USA, Canada, the UK and Europe, Australia, India, Nepal and everywhere else Flutter is used. When you are ready, build the projects and games and put them on GitHub: together they make a strong beginner portfolio.

Flutter questions people ask

What is Flutter?

Flutter is Google's free, open source framework for building apps for Android, iOS, the web, Windows, macOS and Linux from one codebase. You write the app once in the Dart language and Flutter draws the same UI on every platform.

Is Flutter easy to learn for beginners?

Yes. Everything on screen is a widget, and widgets combine like building blocks. Learn a little Dart first, then follow this course in order. Every lesson has short examples you can run and edit in the browser, so you see results immediately.

Do I need to learn Dart before Flutter?

You need the basics: variables, functions, classes, null safety, lists and async/await. The Dart for Flutter lesson covers them on one page, and the full Dart tutorial at dart-tutorial.dev goes deeper.

Which state management should I learn in Flutter?

Start with setState and ChangeNotifier to understand the idea. Then learn Riverpod for most modern apps, Bloc/Cubit for large team projects, Provider if you are a beginner, or GetX for very fast development.

Can I make games with Flutter?

Yes. The Flame engine adds a game loop, sprites, collisions, physics and sound to Flutter. This site has a full Flame course and five complete games (Snake, Flappy Bird style, Space Shooter, Brick Breaker and an Endless Runner) that run in your browser.

Can I run Flutter code online without installing anything?

Yes. Examples with a Run button open in an online Flutter editor (DartPad) right on the page, and the Flutter online compiler page lets you write your own apps and games in the browser.

How long does it take to learn Flutter?

With about an hour a day, most beginners build simple apps in four to six weeks and complete apps with APIs and state management in two to three months. Developers who know another language often move faster.

Is this Flutter course free?

Yes. Every lesson, example and project is free, with no sign-up and no paywall.

Flutter Tutorial is part of Dart Tutorial, an independent learning resource written by a Flutter developer. Found a mistake or want a topic covered? Get in touch.