Learn Flutter

Google's UI toolkit for natively compiled apps from one Dart codebase

24 lessons · 6 hours · 4 levels · covers Flutter 3.35

Flutter is an open-source UI framework that renders every pixel itself, so one Dart codebase produces fast, consistent apps for iOS, Android, web, Windows, macOS and Linux. UIs are built from composable widgets, with hot reload for instant feedback. Learn it to ship polished cross-platform mobile apps with a single team and codebase.

Before you start

Flutter builds on these; the tree links to the exact lessons you need.

How deep do you want to go?

1. EssentialsRead and write simple code, do the everyday basics8 lessons · 2 hours in total
2. PracticalUse it productively at work, with the usual idioms15 lessons · 3 hours in total
3. AdvancedThe less common features, performance and trade-offs20 lessons · 4 hours in total
4. ExpertInternals and the edge cases experts know24 lessons · 6 hours in total

The Flutter tree

FlutterProject setup and hot reloadProject setup and hotreloadWidgets and StatelessWidgetWidgets andStatelessWidgetRow, Column, Container and paddingRow, Column,Container and padd…StatefulWidget and setStateStatefulWidget andsetStateMaterialApp, Scaffold and themingMaterialApp, Scaffoldand themingListView and scrollingListView andscrollingButtons, text fields and gesturesButtons, text fieldsand gesturesImages, icons and assetsImages, icons andassetsConstraints, Expanded and FlexibleConstraints,Expanded and Flexi…Navigation and routingNavigation androutingForms and validationForms and validationFutureBuilder and StreamBuilderFutureBuilder andStreamBuilderHTTP requests and JSON modelsHTTP requests andJSON modelsShared state: ChangeNotifier and ProviderShared state:ChangeNotifier and…Responsive and adaptive layoutsResponsive andadaptive layoutsClasses and constructorsClasses andconstructorsLists, sets and mapsLists, sets and mapsFutures and async/awaitFutures andasync/awaitSound null safetySound null safetyRecords and patternsRecords and patterns
Essentials and Practical shown (15 of 24 lessons); the full list is below. Click a lesson to read it.

All 24 lessons, in order

Widgets and tooling

  1. Project setup and hot reload · Essentials · 12 min

    Create a Flutter project, understand its folders and main(), run it on a device, and use hot reload and hot restart.

  2. Widgets and StatelessWidget · Essentials · 12 min

    Build UIs by composing immutable widgets, write StatelessWidgets, and understand build methods and BuildContext.

  3. MaterialApp, Scaffold and theming · Essentials · 12 min

    Structure screens with MaterialApp and Scaffold, and style the app consistently with ThemeData, ColorScheme and text themes.

Layout and scrolling

  1. Row, Column, Container and padding · Essentials · 12 min

    Arrange widgets with Row, Column, Stack, Container, Padding, SizedBox and alignment properties.

  2. ListView and scrolling · Essentials · 12 min

    Show scrollable content with SingleChildScrollView, ListView, ListView.builder, separators and GridView.

  3. Images, icons and assets · Essentials · 8 min

    Declare assets in pubspec.yaml, show local and network images, and use icons and resolution-aware variants.

  4. Constraints, Expanded and Flexible · Practical · 14 min

    Understand Flutter's rule that constraints go down, sizes go up and parents set position, and fix overflow and unbounded errors.

  5. Responsive and adaptive layouts · Practical · 12 min

    Adapt layouts to screen size with MediaQuery, LayoutBuilder and breakpoints, and respect safe areas, orientation and platform conventions.

  6. Slivers and custom scroll effects · Advanced · 14 min

    Compose scrollable areas from slivers with CustomScrollView, SliverAppBar, SliverList and SliverGrid.

State and interaction

  1. StatefulWidget and setState · Essentials · 14 min

    Keep mutable UI state in a State object, update it with setState, and use initState and dispose.

  2. Buttons, text fields and gestures · Essentials · 12 min

    Handle taps with buttons and GestureDetector, read text with TextField and TextEditingController, and use switches and checkboxes.

  3. Forms and validation · Practical · 12 min

    Group fields in a Form with a GlobalKey, validate with validator functions, and submit safely.

  4. Shared state: ChangeNotifier and Provider · Practical · 16 min

    Lift state up, share it with InheritedWidget, model it with ChangeNotifier, and use provider or Riverpod for app-wide state.

  5. The element tree, keys and State identity · Advanced · 16 min

    Learn how widgets map to elements, when State is kept or recreated, and how ValueKey, ObjectKey, UniqueKey and GlobalKey change that.

Navigation and data

  1. Navigation and routing · Practical · 14 min

    Move between screens with Navigator push and pop, pass arguments and results, and use go_router for URL-based routing and deep links.

  2. FutureBuilder and StreamBuilder · Practical · 12 min

    Show loading, data and error states for asynchronous work with FutureBuilder and StreamBuilder, without refetching on every build.

  3. HTTP requests and JSON models · Practical · 14 min

    Call REST APIs with package:http, decode JSON into typed model classes, and handle status codes and errors.

Architecture, testing and motion

  1. Implicit and explicit animations · Advanced · 16 min

    Animate with implicit widgets like AnimatedContainer, build explicit animations with AnimationController and Tween, and use Hero transitions.

  2. Unit, widget and integration tests · Advanced · 16 min

    Test logic with unit tests, UI with widget tests using WidgetTester and finders, and full flows with integration_test.

  3. App architecture: layers, view models, DI · Advanced · 16 min

    Structure apps into UI, view models, repositories and services, inject dependencies, and keep data flowing one way.

Rendering, performance and platforms

  1. Three trees and the rendering pipeline · Expert · 18 min

    Understand widgets, elements and render objects, the build-layout-paint-composite pipeline, and how Impeller draws frames.

  2. Profiling and performance · Expert · 16 min

    Find and fix jank with profile mode and DevTools, reduce rebuilds, use const and RepaintBoundary, and avoid expensive effects.

  3. Platform channels, plugins and FFI · Expert · 16 min

    Call native Android and iOS code with MethodChannel and EventChannel, generate type-safe bindings with Pigeon, and call C with dart:ffi.

  4. CustomPainter and custom drawing · Expert · 14 min

    Draw charts, gauges and custom shapes with CustomPaint and CustomPainter, repaint efficiently, and animate drawings.