CodeBlanks Logo Icon CodeBlanks
Login Register
Free 4 levels

Flutter

All levels of Flutter 3.x from widgets to state, Firebase and expert topics with hands-on projects.

The Flutter course covers all levels with widgets, state, Provider, Riverpod, Bloc, Firebase, custom render, FFI and design systems.

  • 306 lessons
  • 20 h 8 min
  • 5 projects
Start for free View curriculum

No account needed, you can start right away. To save your progress, create a free account

Levels

The Flutter course goes from zero to expert in four levels. Start at any level you like.
Not sure of your level? Take the placement test
Beginner

Meet Flutter, set up the SDK, and learn widgets, state and core widgets.

  • Intro to Flutter
  • First app
  • Widget basics
  • StatelessWidget
99 lessons · 6 h 32 min See lessons →
Intermediate

Build real apps with setState, Provider, Riverpod, Bloc, http and persistence.

  • setState state
  • Provider package
  • Riverpod basics
  • Bloc basics
99 lessons · 6 h 32 min See lessons →
Advanced

Master Riverpod deep, Bloc deep, Firebase, Hive, CustomPainter and testing.

  • Riverpod advanced
  • Bloc advanced
  • Hive (NoSQL)
  • Firebase Auth
69 lessons · 4 h 32 min See lessons →
Expert

Learn Flutter internals, performance, custom render, FFI, web and design systems.

  • Flutter internals
  • Performance
  • Custom render
  • Platform plugin
39 lessons · 2 h 32 min See lessons →

Projects you will build

At every level you combine what you learned into a real page.
Todo app Beginner · 5 lessons Counter app Beginner · 5 lessons Weather app Intermediate · 5 lessons Note app Intermediate · 5 lessons Testing and CI/CD Advanced · 5 lessons

How does it work?

Short explanation

Each lesson explains one concept in a few short cards; no long videos or walls of text.

Try it right away

Multiple choice, fill-in-the-blank and matching exercises lock in what you just learned.

Write it yourself

You write real code in the in-browser editor; it is checked instantly and you see the result live.

Curriculum

62 groups · 306 lessons · 20 h 8 min

Meet Flutter, set up the SDK, and learn widgets, state and core widgets.

1
Intro to Flutter
5 lessons · 20 min
  1. 1 What is Flutter? Learn that Flutter is a cross-platform UI toolkit made by Google. 4 min
  2. 2 Dart and Flutter Learn that Flutter uses the Dart language and why this pair was chosen. 4 min
  3. 3 SDK and setup Learn to download, install and add Flutter SDK to PATH. 4 min
  4. 4 flutter doctor Read the flutter doctor output and fix missing dependencies. 4 min
  5. 5 Summary - Flutter setup Combine SDK install and doctor output to set up a ready dev environment. 4 min
2
First app
5 lessons · 20 min
  1. 1 flutter create Learn how to scaffold a new project with flutter create. 4 min
  2. 2 Project structure Learn the roles of the lib/, android/ and ios/ folders. 4 min
  3. 3 main and runApp Learn how main connects MaterialApp via runApp. 4 min
  4. 4 Hot reload Learn what hot reload does and why it is essential. 4 min
  5. 5 Summary - First app Combine create, runApp and hot reload to ship your first running app. 4 min
3
Widget basics
5 lessons · 20 min
  1. 1 What is a widget? Learn that a widget is the core building block of Flutter. 4 min
  2. 2 Widget tree Learn that widgets form a nested tree. 4 min
  3. 3 BuildContext Learn that BuildContext marks a widget's place in the tree. 4 min
  4. 4 Material and Cupertino Learn the difference between Material and Cupertino widget sets. 4 min
  5. 5 Summary - Widget basics Combine widget, tree and BuildContext to build a simple UI. 4 min
4
StatelessWidget
5 lessons · 20 min
  1. 1 What is StatelessWidget? Learn that StatelessWidget has no internal state. 4 min
  2. 2 The build method Learn what build returns and when it is called. 4 min
  3. 3 Passing parameters Learn to pass data to widgets via constructor parameters. 4 min
  4. 4 const constructor Learn how const constructor improves performance. 4 min
  5. 5 Summary - StatelessWidget Combine StatelessWidget, build and const to write a static card. 4 min
5
StatefulWidget
5 lessons · 20 min
  1. 1 What is StatefulWidget? Learn that StatefulWidget is used for UI that changes over time. 4 min
  2. 2 createState and State Learn how createState produces the State object. 4 min
  3. 3 The setState method Learn that setState triggers a rebuild. 4 min
  4. 4 initState and dispose Learn the initState and dispose lifecycle methods. 4 min
  5. 5 Summary - StatefulWidget Combine StatefulWidget, setState and initState to build a counter. 4 min
6
Text and Container
5 lessons · 20 min
  1. 1 The Text widget Learn to display text with the Text widget. 4 min
  2. 2 TextStyle Learn to set font, color and size with TextStyle. 4 min
  3. 3 Container Learn to create a boxed area with Container. 4 min
  4. 4 BoxDecoration Learn to add border and radius with BoxDecoration. 4 min
  5. 5 Summary - Text and Container Combine Text, Container and BoxDecoration to make a title card. 4 min
7
Column and Row
5 lessons · 20 min
  1. 1 Column Learn to stack widgets vertically with Column. 4 min
  2. 2 Row Learn to lay out widgets horizontally with Row. 4 min
  3. 3 MainAxisAlignment Learn to align on the main axis with MainAxisAlignment. 4 min
  4. 4 CrossAxisAlignment Learn to align on the cross axis with CrossAxisAlignment. 4 min
  5. 5 Summary - Column and Row Combine Column, Row and alignments to make a profile row. 4 min
8
Padding and margin
5 lessons · 20 min
  1. 1 The Padding widget Learn to add inner spacing with the Padding widget. 4 min
  2. 2 EdgeInsets Learn the difference between EdgeInsets.all, only and symmetric. 4 min
  3. 3 Container margin Learn to add outer spacing with Container margin. 4 min
  4. 4 Spacing strategy Learn how to choose between padding and margin. 4 min
  5. 5 Summary - Padding and margin Combine padding and margin to make a breathable card. 4 min
9
SizedBox and Center
5 lessons · 20 min
  1. 1 SizedBox Learn to give fixed size or spacing with SizedBox. 4 min
  2. 2 The Center widget Learn to center a child with Center. 4 min
  3. 3 SizedBox.expand Learn to fill the parent with SizedBox.expand. 4 min
  4. 4 The Align widget Learn to position a child at a specific point with Align. 4 min
  5. 5 Summary - SizedBox and Center Combine SizedBox and Center to build a centered welcome screen. 4 min
10
ListView
5 lessons · 20 min
  1. 1 What is ListView? Learn to build a scrollable list with ListView. 4 min
  2. 2 ListView.builder Learn to build large lists efficiently with ListView.builder. 4 min
  3. 3 ListTile Learn to build a title + subtitle row with ListTile. 4 min
  4. 4 Separator Learn to add dividers between rows with ListView.separated. 4 min
  5. 5 Summary - ListView Combine ListView, builder and ListTile to make a contacts list. 4 min
11
GestureDetector
5 lessons · 20 min
  1. 1 What is GestureDetector? Learn to catch tap events with GestureDetector. 4 min
  2. 2 onTap and onDoubleTap Learn the difference between onTap and onDoubleTap. 4 min
  3. 3 onLongPress Learn to catch long press with onLongPress. 4 min
  4. 4 onHorizontalDragUpdate Learn to catch horizontal drag events. 4 min
  5. 5 Summary - GestureDetector Combine GestureDetector callbacks to make a tappable card. 4 min
12
InkWell
5 lessons · 20 min
  1. 1 What is InkWell? Learn Material ripple taps with InkWell. 4 min
  2. 2 InkWell vs GestureDetector Learn the difference between InkWell and GestureDetector. 4 min
  3. 3 Material parent Learn that InkWell needs a Material ancestor. 4 min
  4. 4 onTap callback Handle taps with InkWell onTap and give feedback. 4 min
  5. 5 Summary - InkWell Combine InkWell, Material and callback to make a rippling button. 4 min
13
ElevatedButton
5 lessons · 20 min
  1. 1 What is ElevatedButton? Learn to make a raised button with ElevatedButton. 4 min
  2. 2 onPressed and child Learn the roles of onPressed callback and child content. 4 min
  3. 3 TextButton and OutlinedButton Learn the TextButton and OutlinedButton variants. 4 min
  4. 4 Button style Customize button color and shape with ButtonStyle. 4 min
  5. 5 Summary - ElevatedButton Combine ElevatedButton and styles to make an action bar. 4 min
14
TextFormField
5 lessons · 20 min
  1. 1 What is TextFormField? Learn to capture form input with TextFormField. 4 min
  2. 2 TextEditingController Control input with TextEditingController. 4 min
  3. 3 decoration and label Add labels and hints with InputDecoration. 4 min
  4. 4 obscureText Mask password fields with obscureText. 4 min
  5. 5 Summary - TextFormField Combine TextFormField and controller to make an input form. 4 min
15
Todo appProject
5 lessons · 20 min
  1. 1 Project skeleton Lay out the skeleton and data model of the todo app. 4 min
  2. 2 Add screen Write the TextFormField screen to add a new task. 4 min
  3. 3 List and onTap Add onTap to a list row and toggle task completion. 4 min
  4. 4 Delete and divider Add swipe to delete and row dividers. 4 min
  5. 5 Summary - Todo app Combine all parts and finish a working todo app. 4 min
16
Images
5 lessons · 20 min
  1. 1 AssetImage Load local images with AssetImage. 4 min
  2. 2 Image.network Display remote images with Image.network. 4 min
  3. 3 Image.file Show on-device file images with Image.file. 4 min
  4. 4 fit and size Learn image fit behavior with BoxFit. 4 min
  5. 5 Summary - Images Combine AssetImage and Image.network to build a gallery. 4 min
17
Scaffold and AppBar
5 lessons · 20 min
  1. 1 What is Scaffold? Learn that Scaffold is the skeleton of an app screen. 4 min
  2. 2 AppBar Build a top header bar with AppBar. 4 min
  3. 3 FloatingActionButton Add a floating action button with FloatingActionButton. 4 min
  4. 4 Drawer Add a side drawer menu with Drawer. 4 min
  5. 5 Summary - Scaffold and AppBar Combine Scaffold, AppBar and FAB to make a home screen. 4 min
18
Navigator
5 lessons · 20 min
  1. 1 What is Navigator? Manage the screen stack with Navigator. 4 min
  2. 2 Navigator.push Open a new screen with Navigator.push. 4 min
  3. 3 MaterialPageRoute Build Material transition with MaterialPageRoute. 4 min
  4. 4 Navigator.pop Go back to the previous screen with Navigator.pop. 4 min
  5. 5 Summary - Navigator Combine push and pop to make a two-screen flow. 4 min
19
Counter appProject
5 lessons · 20 min
  1. 1 Project skeleton Build the counter app skeleton with Scaffold. 4 min
  2. 2 State and counter Define the counter variable with StatefulWidget. 4 min
  3. 3 Increment button Write an increment callback on FloatingActionButton. 4 min
  4. 4 Decrement button Write a decrement callback on a second FAB. 4 min
  5. 5 Summary - Counter app Combine all parts and finish a working counter app. 4 min
20
Beginner finalFinal
4 lessons · 12 min
  1. 1 Challenge 1 Build a card combining stateless and stateful widgets. 3 min
  2. 2 Challenge 2 Build a contacts screen with ListView and ListTile. 3 min
  3. 3 Challenge 3 Build a two-screen flow with Navigator push and pop. 3 min
  4. 4 Challenge 4 Build a form validation screen with Form and TextFormField. 3 min

Build real apps with setState, Provider, Riverpod, Bloc, http and persistence.

1
setState state
5 lessons · 20 min
  1. 1 setState in depth Learn how setState works and when it rebuilds. 4 min
  2. 2 Lifting state up Lift state to a common ancestor to share it. 4 min
  3. 3 setState pitfalls Learn async setState and the mounted check. 4 min
  4. 4 State and performance Learn setState's cost and what it rebuilds. 4 min
  5. 5 Summary - setState Combine setState and lifting to build a counter screen. 4 min
2
Provider package
5 lessons · 20 min
  1. 1 What is Provider? Share state across the tree with Provider. 4 min
  2. 2 ChangeNotifier Build a listenable state class with ChangeNotifier. 4 min
  3. 3 ChangeNotifierProvider Provide the model to the tree with ChangeNotifierProvider. 4 min
  4. 4 context.watch and read Learn the difference between context.watch and context.read. 4 min
  5. 5 Summary - Provider Combine Provider, ChangeNotifier and watch to build a theme. 4 min
3
Riverpod basics
5 lessons · 20 min
  1. 1 What is Riverpod? Learn that Riverpod is a safer alternative to Provider. 4 min
  2. 2 Provider and StateProvider Learn the difference between Provider and StateProvider. 4 min
  3. 3 ConsumerWidget Access ref with ConsumerWidget. 4 min
  4. 4 ProviderScope Wrap the root with ProviderScope. 4 min
  5. 5 Summary - Riverpod basics Combine Riverpod, Provider and ConsumerWidget to make a counter. 4 min
4
Bloc basics
5 lessons · 20 min
  1. 1 What is Bloc? Learn how Bloc manages an event -> state flow. 4 min
  2. 2 Cubit Build a simple state class with Cubit. 4 min
  3. 3 BlocProvider Provide Cubit to the tree with BlocProvider. 4 min
  4. 4 BlocBuilder Listen to state and rebuild UI with BlocBuilder. 4 min
  5. 5 Summary - Bloc basics Combine Cubit, BlocProvider and BlocBuilder to make a counter. 4 min
5
FutureBuilder
5 lessons · 20 min
  1. 1 What is FutureBuilder? Bind async results to UI with FutureBuilder. 4 min
  2. 2 AsyncSnapshot Learn AsyncSnapshot connection states. 4 min
  3. 3 loading and error Handle states with ConnectionState.waiting and hasError. 4 min
  4. 4 Future re-run Use key and setState to re-run a Future. 4 min
  5. 5 Summary - FutureBuilder Combine FutureBuilder and snapshot to make a data screen. 4 min
6
StreamBuilder
5 lessons · 20 min
  1. 1 What is StreamBuilder? Bind a continuous data stream to UI with StreamBuilder. 4 min
  2. 2 What is a Stream? Learn that a Stream emits multiple values over time. 4 min
  3. 3 StreamController Create your own Stream with StreamController. 4 min
  4. 4 Periodic stream Emit periodic values with Stream.periodic. 4 min
  5. 5 Summary - StreamBuilder Combine StreamBuilder and Controller to make a counter. 4 min
7
Form validation
5 lessons · 20 min
  1. 1 The Form widget Group multiple fields with the Form widget. 4 min
  2. 2 validator Validate a field with the validator callback. 4 min
  3. 3 onSaved Collect form data with the onSaved callback. 4 min
  4. 4 autovalidateMode Validate on the fly with autovalidateMode. 4 min
  5. 5 Summary - Form validation Combine Form, validator and onSaved to make an input form. 4 min
8
shared_preferences
5 lessons · 20 min
  1. 1 What is shared_preferences? Store simple key-value pairs with shared_preferences. 4 min
  2. 2 getInstance Access asynchronously with SharedPreferences.getInstance. 4 min
  3. 3 set and get Learn setString, getInt and getString methods. 4 min
  4. 4 Save theme Persist theme choice with shared_preferences. 4 min
  5. 5 Summary - shared_preferences Combine getInstance and set/get to build a settings screen. 4 min
9
sqflite (SQLite)
5 lessons · 20 min
  1. 1 What is sqflite? Open a local SQLite database with sqflite. 4 min
  2. 2 openDatabase Create a database with openDatabase. 4 min
  3. 3 CREATE TABLE Create a table with db.execute. 4 min
  4. 4 INSERT and SELECT Insert and read data with db.insert and db.query. 4 min
  5. 5 Summary - sqflite Combine openDatabase, CREATE and INSERT to make a notes store. 4 min
10
http package
5 lessons · 20 min
  1. 1 What is the http package? Make REST requests with the http package. 4 min
  2. 2 http.get Fetch data with http.get. 4 min
  3. 3 http.post Send data with http.post. 4 min
  4. 4 statusCode Handle errors with Response.statusCode. 4 min
  5. 5 Summary - http Combine http.get and statusCode to fetch data. 4 min
11
JSON parsing
5 lessons · 20 min
  1. 1 jsonDecode Parse a JSON string into a Map with jsonDecode. 4 min
  2. 2 jsonEncode Serialize a Map to JSON string with jsonEncode. 4 min
  3. 3 Nested JSON Access nested Maps and read inner objects. 4 min
  4. 4 List<dynamic> Read JSON arrays as List<dynamic>. 4 min
  5. 5 Summary - JSON parsing Combine jsonDecode and nested access to handle API responses. 4 min
12
Model classes
5 lessons · 20 min
  1. 1 What is a model class? Store data type-safely with a model class. 4 min
  2. 2 fromJson Build a model from JSON with the fromJson factory. 4 min
  3. 3 toJson Serialize a model to JSON with toJson. 4 min
  4. 4 List model Produce List<Model> from a JSON array. 4 min
  5. 5 Summary - Model classes Combine fromJson and toJson to write a typed class. 4 min
13
Weather appProject
5 lessons · 20 min
  1. 1 Project skeleton Build the weather app skeleton and model. 4 min
  2. 2 API call Send a request to the weather API with http.get. 4 min
  3. 3 JSON handling Convert the JSON response to a model with fromJson. 4 min
  4. 4 Loading state Show loading and error states with FutureBuilder. 4 min
  5. 5 Summary - Weather app Combine all parts and finish a working weather app. 4 min
14
GoRouter
5 lessons · 20 min
  1. 1 What is GoRouter? Build declarative navigation 2.0 with GoRouter. 4 min
  2. 2 GoRoute Define paths with GoRoute. 4 min
  3. 3 context.go and push Replace with context.go and stack with context.push. 4 min
  4. 4 URL parameters Read path parameters and query strings. 4 min
  5. 5 Summary - GoRouter Combine GoRouter and GoRoute to make a three-screen flow. 4 min
15
Custom widget
5 lessons · 20 min
  1. 1 What is a custom widget? Write your own widget as a StatelessWidget. 4 min
  2. 2 Composition Compose widgets by nesting them. 4 min
  3. 3 Flexibility via parameters Make the widget flexible via constructor parameters. 4 min
  4. 4 Reusability Reuse the same widget across screens. 4 min
  5. 5 Summary - Custom widget Combine custom widgets and composition to build a card library. 4 min
16
Animation basics
5 lessons · 20 min
  1. 1 AnimatedContainer Animate property changes with AnimatedContainer. 4 min
  2. 2 Tween Interpolate between begin and end values with Tween. 4 min
  3. 3 AnimatedBuilder Rebuild UI each frame with AnimatedBuilder. 4 min
  4. 4 Curve Pick a timing curve with the Curves class. 4 min
  5. 5 Summary - Animation basics Combine AnimatedContainer and Tween to make an animated card. 4 min
17
Note appProject
5 lessons · 20 min
  1. 1 Project skeleton Build the note app skeleton and model. 4 min
  2. 2 List and add Write a list and FloatingActionButton add flow. 4 min
  3. 3 Edit screen Write a form screen to edit an existing note. 4 min
  4. 4 Persistent storage Persist notes with shared_preferences. 4 min
  5. 5 Summary - Note app Combine all parts and finish a working note app. 4 min
18
ThemeData
5 lessons · 20 min
  1. 1 What is ThemeData? Define app-wide theme with ThemeData. 4 min
  2. 2 colorScheme Build a color palette with ColorScheme. 4 min
  3. 3 textTheme Define heading and body styles with TextTheme. 4 min
  4. 4 Theme.of Access theme values with Theme.of(context). 4 min
  5. 5 Summary - ThemeData Combine ThemeData and ColorScheme to build a dark theme. 4 min
19
Dialogs
5 lessons · 20 min
  1. 1 showDialog Open a modal with showDialog. 4 min
  2. 2 AlertDialog Build title, content and actions with AlertDialog. 4 min
  3. 3 ScaffoldMessenger Show a SnackBar with ScaffoldMessenger. 4 min
  4. 4 ModalBottomSheet Open a bottom sheet with showModalBottomSheet. 4 min
  5. 5 Summary - Dialogs Combine showDialog and SnackBar to give feedback. 4 min
20
Intermediate finalFinal
4 lessons · 12 min
  1. 1 Challenge 1 Build an app that manages theme with Provider. 3 min
  2. 2 Challenge 2 Build a screen that lists API items via http and fromJson. 3 min
  3. 3 Challenge 3 Build a notes app with sqflite to add and list notes. 3 min
  4. 4 Challenge 4 Build a three-screen flow with animation via GoRouter. 3 min

Master Riverpod deep, Bloc deep, Firebase, Hive, CustomPainter and testing.

1
Riverpod advanced
5 lessons · 20 min
  1. 1 StateNotifier Manage immutable state with StateNotifier. 4 min
  2. 2 StateNotifierProvider Provide StateNotifier with StateNotifierProvider. 4 min
  3. 3 AsyncValue Model async state with AsyncValue. 4 min
  4. 4 FutureProvider Provide async data with FutureProvider. 4 min
  5. 5 Summary - Riverpod advanced Combine StateNotifier and AsyncValue to make an API screen. 4 min
2
Bloc advanced
5 lessons · 20 min
  1. 1 Bloc class Manage event -> state flow with the Bloc class. 4 min
  2. 2 Event classes Define intents with event classes. 4 min
  3. 3 State classes Model UI state with state classes. 4 min
  4. 4 BlocListener Handle side effects with BlocListener. 4 min
  5. 5 Summary - Bloc advanced Combine Bloc, event and state to make a login flow. 4 min
3
Hive (NoSQL)
5 lessons · 20 min
  1. 1 What is Hive? Open a fast local NoSQL DB with Hive. 4 min
  2. 2 Box and put/get Learn put and get on a Hive box. 4 min
  3. 3 TypeAdapter Register a custom class with TypeAdapter. 4 min
  4. 4 HiveList and lazy box Handle large data with LazyBox and HiveList. 4 min
  5. 5 Summary - Hive Combine Box, put and TypeAdapter to make a settings store. 4 min
4
Firebase Auth
5 lessons · 20 min
  1. 1 What is Firebase Auth? Sign users in with Firebase Auth. 4 min
  2. 2 Email and password Sign up with createUserWithEmailAndPassword. 4 min
  3. 3 signInWithEmailAndPassword Sign in with signInWithEmailAndPassword. 4 min
  4. 4 authStateChanges Listen to session changes with authStateChanges. 4 min
  5. 5 Summary - Firebase Auth Combine signup, signin and authStateChanges to make an auth flow. 4 min
5
Cloud Firestore
5 lessons · 20 min
  1. 1 What is Firestore? Learn the collection and document model with Firestore. 4 min
  2. 2 Add data Add a document with collection().add. 4 min
  3. 3 Read data Read in realtime with collection().snapshots. 4 min
  4. 4 Query and where Filter queries with where. 4 min
  5. 5 Summary - Firestore Combine add, snapshots and where to make a chat screen. 4 min
6
Push notification
5 lessons · 20 min
  1. 1 What is firebase_messaging? Start receiving notifications with firebase_messaging. 4 min
  2. 2 getToken Get the device token with getToken. 4 min
  3. 3 onMessage Catch foreground notifications with onMessage. 4 min
  4. 4 onBackgroundMessage Handle background notifications with onBackgroundMessage. 4 min
  5. 5 Summary - Push notification Combine getToken and onMessage to make a notification screen. 4 min
7
Camera and image_picker
5 lessons · 20 min
  1. 1 What is image_picker? Pick an image from gallery or camera with image_picker. 4 min
  2. 2 pickImage Pick an image with pickImage. 4 min
  3. 3 Camera plugin Build a live camera preview with the camera package. 4 min
  4. 4 CameraController Take a photo with CameraController. 4 min
  5. 5 Summary - Camera Combine image_picker and CameraController to make a photo screen. 4 min
8
Location
5 lessons · 20 min
  1. 1 What is the location package? Get the device location with the location package. 4 min
  2. 2 getLocation Get the current location with getLocation. 4 min
  3. 3 Permissions Request location permission and handle denial. 4 min
  4. 4 onLocationChanged Track location continuously with onLocationChanged. 4 min
  5. 5 Summary - Location Combine getLocation and onLocationChanged to make a map view. 4 min
9
Background task
5 lessons · 20 min
  1. 1 What is workmanager? Schedule background jobs with workmanager. 4 min
  2. 2 callbackDispatcher Define a background callback with callbackDispatcher. 4 min
  3. 3 OneOffTask Schedule one-off tasks with OneOffTask. 4 min
  4. 4 PeriodicTask Schedule periodic tasks with PeriodicTask. 4 min
  5. 5 Summary - Background task Combine callbackDispatcher and PeriodicTask to sync in background. 4 min
10
Platform channel
5 lessons · 20 min
  1. 1 What is MethodChannel? Bridge Dart to native with MethodChannel. 4 min
  2. 2 invokeMethod Call native methods with invokeMethod. 4 min
  3. 3 setMethodCallHandler Receive native calls with setMethodCallHandler. 4 min
  4. 4 EventChannel Stream native events with EventChannel. 4 min
  5. 5 Summary - Platform channel Combine MethodChannel and EventChannel to read battery level. 4 min
11
CustomPainter
5 lessons · 20 min
  1. 1 What is CustomPaint? Draw custom shapes with the CustomPaint widget. 4 min
  2. 2 CustomPainter Learn paint and shouldRepaint with CustomPainter. 4 min
  3. 3 Canvas and Paint Draw lines, circles and rects with Canvas and Paint. 4 min
  4. 4 Path Build polylines and complex shapes with Path. 4 min
  5. 5 Summary - CustomPainter Combine CustomPaint and Path to make a pie chart. 4 min
12
Advanced animation
5 lessons · 20 min
  1. 1 AnimationController Control animations with AnimationController. 4 min
  2. 2 Tween and CurvedAnimation Smooth curves with CurvedAnimation. 4 min
  3. 3 Hero animation Animate transitions between screens with Hero. 4 min
  4. 4 Stagger animation Sequence multiple animations as stagger. 4 min
  5. 5 Summary - Advanced animation Combine AnimationController and Hero for a transition. 4 min
13
Testing and CI/CDProject
5 lessons · 20 min
  1. 1 What is flutter_test? Start writing widget tests with flutter_test. 4 min
  2. 2 testWidgets Write widget render tests with testWidgets. 4 min
  3. 3 pump and settle Drive animated tests with pump and pumpAndSettle. 4 min
  4. 4 GitHub Actions Set up a Flutter CI flow with GitHub Actions. 4 min
  5. 5 Summary - Testing and CI/CD Combine testWidgets and CI to make a quality gate. 4 min
14
Advanced finalFinal
4 lessons · 12 min
  1. 1 Challenge 1 Build API state management with StateNotifier and AsyncValue. 3 min
  2. 2 Challenge 2 Build a login flow with error handling via Bloc. 3 min
  3. 3 Challenge 3 Build a realtime chat screen with Firestore. 3 min
  4. 4 Challenge 4 Build a chart animation with CustomPainter and AnimationController. 3 min

Learn Flutter internals, performance, custom render, FFI, web and design systems.

1
Flutter internals
5 lessons · 20 min
  1. 1 Widget tree Learn how the widget tree forms and updates. 4 min
  2. 2 Element tree Learn that the element tree bridges widget and render trees. 4 min
  3. 3 Render tree Learn that the RenderObject tree lays out and paints. 4 min
  4. 4 Build owner Learn how BuildOwner drives the build process. 4 min
  5. 5 Summary - Flutter internals Trace a widget's life across all three trees. 4 min
2
Performance
5 lessons · 20 min
  1. 1 Profile mode Measure real performance with profile mode. 4 min
  2. 2 DevTools Profile CPU and widgets with Flutter DevTools. 4 min
  3. 3 RepaintBoundary Limit repaint area with RepaintBoundary. 4 min
  4. 4 const and ListView.builder Learn the performance impact of const widgets and builders. 4 min
  5. 5 Summary - Performance Combine profile, RepaintBoundary and const to optimize. 4 min
3
Custom render
5 lessons · 20 min
  1. 1 What is RenderObject? Build a render object from scratch with RenderObject. 4 min
  2. 2 RenderBox Lay out a box with RenderBox. 4 min
  3. 3 performLayout Position children with performLayout. 4 min
  4. 4 paint method Draw inside the paint method. 4 min
  5. 5 Summary - Custom render Combine RenderBox, performLayout and paint to make a custom widget. 4 min
4
Platform plugin
5 lessons · 20 min
  1. 1 Plugin structure Learn the Dart and native parts of a Flutter plugin. 4 min
  2. 2 MethodChannel registration Register the plugin's MethodChannel. 4 min
  3. 3 Android implementation Write plugin methods on the Android side. 4 min
  4. 4 iOS implementation Write plugin methods on the iOS side. 4 min
  5. 5 Summary - Platform plugin Combine registration, Android and iOS to make a small plugin. 4 min
5
dart:ffi
5 lessons · 20 min
  1. 1 What is FFI? Call C libraries with dart:ffi. 4 min
  2. 2 DynamicLibrary Open a C library with DynamicLibrary.open. 4 min
  3. 3 lookupFunction Bind a C function to Dart with lookupFunction. 4 min
  4. 4 Pointer Manage C memory with Pointer<T>. 4 min
  5. 5 Summary - dart:ffi Combine DynamicLibrary and lookupFunction to call C. 4 min
6
Flutter web
5 lessons · 20 min
  1. 1 What is Flutter web? Learn the canvas and HTML renderers of Flutter web. 4 min
  2. 2 flutter build web Produce a web bundle with flutter build web. 4 min
  3. 3 URL strategy Remove the URL '#' with setUrlStrategy. 4 min
  4. 4 Web vs mobile Learn behavioral differences between web and mobile. 4 min
  5. 5 Summary - Flutter web Combine build web and setUrlStrategy for a web app. 4 min
7
Design system
5 lessons · 20 min
  1. 1 Theme architecture Learn theme layers and ThemeExtension. 4 min
  2. 2 Token system Build a design language with color and size tokens. 4 min
  3. 3 Component library Build a reusable component library. 4 min
  4. 4 Theme switching Switch between multiple app themes at runtime. 4 min
  5. 5 Summary - Design system Combine tokens, components and theme switch into a system. 4 min
8
Expert finalFinal
4 lessons · 12 min
  1. 1 Challenge 1 Build a layout widget from scratch with RenderBox. 3 min
  2. 2 Challenge 2 Call math from a C library via dart:ffi. 3 min
  3. 3 Challenge 3 Build a Flutter web app with URL strategy and router. 3 min
  4. 4 Challenge 4 Build a multi-theme design system with tokens and ThemeExtension. 3 min

Lessons are free, an account keeps your progress

You do not have to sign up. If you do, you continue where you left off and never lose your work.

  • Progress saved on every device
  • Earn XP and badges
  • Keep your daily streak
  • Get a certificate when you finish
create a free account

Frequently asked questions

Are the Flutter lessons free?

Yes. All 306 lessons of the Flutter course are free and you can start without an account.

Do I need any prior knowledge?

No. The beginner level starts from zero; a browser is all you need. If you already know the basics, start at a higher level.

How long does the course take?

Lessons take 2–8 minutes. The whole course is about 20 hours; with 15–20 minutes a day you can finish in a few months.

Do I get a certificate?

Yes. When you complete the course with a free account, a verifiable certificate is issued in your name.

Will I lose my progress without an account?

Without an account your progress is kept only in your current browser. When you create a free account it is moved to your account.

Next step Algorithms

From Big-O and sorting to data structures, dynamic programming, shortest paths and expert topics.