Flutter Roadmap
This Flutter Roadmap is a free, full-text syllabus of 108 lessons in 20 stages, starting with Basics of Dart and ending with Deployment. It suits anyone who wants to learn Flutter, whether new to it or filling gaps. There is no fixed length: every lesson is open from the start, so you go at your own pace and skip what you already know.
Last updated
Reading is open to everyone. Sign in to join this roadmap and track what you finish.
Continue learning
1. Basics of DartBasics of Dart
0%Basics of Dart
9 topics · 6 sub-topics · 0 completed
The last 2 topics are drawn beside this stage on the original roadmap. Which stage they belong to is not recorded, so they are listed here rather than filed under one.
The diagram draws the same 108 lessons as a map, with lines showing the order. It needs JavaScript; the full syllabus below lists every lesson as text.
Full syllabus: every lesson in the Flutter roadmap
20 stages and 108 lessons, in the order the roadmap suggests. Every lesson is free to read and open from the start.
Stage 1: Basics of Dart
Basics of Dart
Dart is an open-source, general-purpose, object-oriented programming language with C-style syntax developed by Google in 2011. The purpose of Dart programming is to create a frontend user interfaces for the web and mobile apps. It can also be used to build server and desktop applications.
Dart Pad
DartPad is an online tool that allows developers to write and run Dart code snippets. It can also be used to run Flutter code, making it a convenient way to try out Flutter apps and widgets without having to set up a full development environment.
Variables
In Flutter, variables are used to store values. There are three types of variables in Flutter namely local, global and instance variables.Variables in Flutter can store values of different data types, such as numbers, strings, booleans, and more.
Built-in Types
There are several built-in data types, including int, double, String, bool, List, Sets, and Map. Additionally, there are other complex data types like dynamic, var, and Object in Dart programming language, which are used in Flutter.
Functions
Dart is a true object-oriented language, so even functions are objects and have a type, Function. This means that functions can be assigned to variables or passed as arguments to other functions. You can also call an instance of a Dart class as if it were a function.
Operators
Flutter, and Dart, utilize various operators to manipulate data: arithmetic operators for math, relational operators for comparisons, logical operators for boolean logic, assignment operators for value assignment, and the ternary operator for concise conditional expressions, enabling diverse operations on values…
Control Flow Statements
Dart's control flow statements manage program execution: if-else for conditional logic, for, while, and do-while loops for repetition, switch-case for multi-way selection, and break and continue to alter loop behavior, enabling complex program logic.
Flutter CLI
Flutter CLI (Command Line Interface) is a command-line tool that is used to develop, build, and run Flutter applications. It provides a set of commands and tools that developers can use to create, test, and deploy Flutter apps from the terminal. Some of the common tasks that can be performed using the Flutter CLI…
FVM
Flutter version manager is a tool used to manage different versions of Flutter SDK on a developer's machine. Flutter is a popular open-source mobile application development framework, and its SDK is updated frequently with new features, bug fixes, and improvements. However, sometimes developers need to work with…
Stage 2: Development Environment
Development Environment
To set up a development environment for Flutter, you need to install the following software:
Stage 3: Widgets
Widgets
Widgets in Flutter are the basic building blocks of the user interface. They define how the UI looks and behaves. Widgets can be combined to create complex user interfaces and can be easily customized. Widgets in Flutter are also designed to be highly reusable, allowing developers to build complex UIs quickly and…
Responsive Widgets
Responsive widgets in Dart, primarily within Flutter, are crucial for building applications that adapt to diverse screen sizes and orientations. Developers achieve this adaptability using tools like LayoutBuilder to respond to available space, MediaQuery to gather device information, and Expanded and Flexible for…
Inherited Widgets
Inherited widgets in Flutter are a powerful mechanism for efficiently propagating data down the widget tree. They essentially create a shared data scope that descendant widgets can access without needing to explicitly pass the data through constructors. When a widget needs to access data from an ancestor, it can…
Stateless Widgets
Stateless widgets in Flutter are widgets that don't maintain any mutable state. They are designed to be immutable and rebuild each time the framework needs to update the UI. They are suitable for static, unchanging views or simple animations. They can be created using the StatelessWidget class and have a single…
Stateful Widgets
A stateful widget is dynamic: for example, it can change its appearance in response to events triggered by user interactions or when it receives data. Checkbox, Radio, Slider, InkWell, Form, and TextField are examples of stateful widgets.
Styled Widgets
Styled widgets in Flutter refer to widgets that are decorated with custom styles, such as colors, fonts, shapes, and visual properties. They help create consistent and visually appealing user interfaces by applying themes and styling across your application.
Material Widgets
Material Widgets are a set of Flutter widgets that implement Material Design, Google's visual language for design. They are designed to provide a consistent look and feel on both Android and iOS devices.
Cupertino Widgets
Cupertino widgets are a set of Flutter widgets that mimic the look and feel of Apple's iOS user interface. They are designed to provide a consistent look and feel on both iOS and Android devices, and include widgets such as CupertinoButton, CupertinoAlertDialog, and CupertinoSlider. These widgets are useful for…
VS Code
VS Code is a lightweight, fast, and highly customizable code editor that provides excellent support for Flutter development. To use VS Code for Flutter development, you must install the Flutter and Dart plugins for VS Code. These plugins support Flutter-specific features such as syntax highlighting, debugging, and…
Android Studio
Android Studio is an IDE that can be used for developing Flutter applications as well as Android apps. Flutter is a UI toolkit for building beautiful, natively compiled applications for mobile, web, and desktop from a single codebase. In Android Studio, developers can use the Flutter plugin to access a suite of…
IntelliJ Idea
IntelliJ IDEA is a powerful Integrated Development Environment (IDE) created by JetBrains. Essentially, it's a software application that provides comprehensive facilities to computer programmers for software development.
Stage 4: Working with Assets
Working with Assets
Assets are resources such as images, fonts, and other files that are included in your app. To use assets in Flutter, you need to specify them in your app's pubspec.yaml file and then access them in your code.
Stage 5: Version Control Systems
Version Control Systems
Version control systems allow you to track changes to your codebase/files over time. They allow you to go back to some previous version of the codebase without any issues. Also, they help in collaborating with people working on the same code – if you’ve ever collaborated with other people on a project, you might…
Git
Git is a free and open source distributed version control system designed to handle everything from small to very large projects with speed and efficiency.
Fonts
You can use custom fonts in your app by including the font file in your app's assets and specifying the font in your app's styles. To use a custom font:
Images
In Flutter, you can display images using the Image widget. There are several ways to add an image to your app:
Other File Types
In Flutter, you can work with different file types besides images. Some common file types that you can use in Flutter include:
Stage 6: Repo Hosting Services
Repo Hosting Services
Several popular repository hosting services, including GitHub, GitLab, Bitbucket, AWS CodeCommit, and Azure DevOps, support Flutter development by offering Git repository management, issue tracking, and collaboration tools. When selecting a service, developers should consider factors like project needs,…
GitHub
GitHub is a web-based platform that provides hosting for software development and version control using Git. It is widely used by developers and organizations around the world to manage and collaborate on software projects.
Stage 7: Package Managers
Package Managers
The package manager for Flutter is called pub. It is used to manage Flutter projects' dependencies and publish Flutter packages. It is included with the Flutter SDK and can be run from the command line using the pub command.
pub.dev
pub.dev is the official package repository for Dart and Flutter packages. It is a platform for hosting, managing, and distributing Dart packages and Flutter plugins. Developers can use pub.dev to search for packages, find information about packages, and install packages in their Flutter projects.
flutter pub / dart pub
pub is the package manager for Dart and Flutter, used for managing dependencies and publishing packages.
Stage 8: Design Principles
Design Principles
Flutter development emphasizes design principles like Material Design, responsiveness, user-centeredness, simplicity, consistency, accessibility, and performance to create visually appealing and user-friendly applications that function seamlessly across various devices and cater to diverse user needs.
Dependency Injection
Dependency Injection is a design pattern that allows objects to receive their dependencies from external sources instead of creating them internally. In Flutter, this can be useful for managing complex state, reducing coupling between components, and making testing easier.
Design Patterns
Design patterns are solutions to common problems in software development that can be used to improve the quality and maintainability of your code.
SOLID Principles
SOLID is a mnemonic acronym for five design principles intended to make object-oriented designs more understandable, flexible, and maintainable.
OOP
Object-oriented programming (OOP) is a programming paradigm that is based on the concept of "objects," which are instances of a class. In OOP, a class is a blueprint for creating objects, which have both data (attributes) and behavior (methods). The main idea behind OOP is to model real-world objects and their…
Stage 9: Working with APIs
Working with APIs
Working with APIs in Flutter involves making HTTP requests to a server and processing the responses. Flutter provides a number of libraries for making HTTP requests, including dart:io and http.
JSON Serialize / Deserialize
JSON (JavaScript Object Notation) is a lightweight data interchange format that is easy for humans to read and write and easy for machines to parse and generate. In Flutter, JSON is used for transmitting data between the client and server, typically over an HTTP connection.
Web Sockets
In addition to normal HTTP requests, you can connect to servers using WebSockets. Web sockets allows for bidirectional communication between a client (such as a web browser) and a server over a single, long-lived connection. They are a more efficient alternative to HTTP for providing real-time data, as they allow…
GraphQL
GraphQL is a query language for your API that allows clients to request exactly the data they need, and nothing more. It was developed by Facebook and released as open source in 2015.
RESTful APIs
REST, or REpresentational State Transfer, is an architectural style for providing standards between computer systems on the web, making it easier for systems to communicate with each other.
Stage 10: Storage
Storage
Flutter provides several options for persistent storage, some of which are as follow:
SQLite
SQLite is an open-source, lightweight relational database management system (RDBMS) used to store and manage data. It is written in C and self-contained, meaning it does not require a separate server process or system. SQLite is commonly used in mobile applications, embedded systems, and web browsers and is also…
Shared Preferences
In Flutter, SharedPreferences is a plugin allowing you to store data in key-value pairs persistently. It is similar to a local database or cache, but it is specifically designed to store small pieces of data, such as user preferences or settings. The SharedPreferences plugin is often used to store simple pieces of…
Firebase
Firebase is Google's mobile development platform that provides backend services like authentication, the Cloud Firestore database, cloud storage, and push notifications. The FlutterFire plugins integrate these services into Flutter apps, letting you add a backend without running your own servers.
Authentication
Firebase Authentication is a service provided by Firebase that allows you to easily add user authentication to your Flutter app. With Firebase Authentication, you can authenticate users using email and password, phone number, or popular identity providers like Google, Facebook, and more.
Storage
In Flutter, you can use Firebase Storage to store and retrieve binary data, such as images, audio files, and videos. Firebase Storage is a cloud-based storage service provided by Firebase that makes it easy to store and serve large binary data, such as images and videos, in your Flutter app.
Firestore
Firebase Firestore is a cloud-based NoSQL document database service provided by Firebase that makes it easy to store, manage, and retrieve data in your Flutter app. Firestore is a flexible, scalable, and easy-to-use database that allows you to store and retrieve data in the form of documents, collections, and fields.
Push Notifications
Implementing Firebase push notifications in Flutter involves setting up a Firebase project, integrating the FCM plugin, handling and displaying incoming notifications within the app, testing through the Firebase Console or tools like Postman, and customizing notification appearance with icons, sounds, and vibration…
Remote Config
Firebase Remote Config, accessed in Flutter via the firebaseremoteconfig plugin, enables dynamic app behavior and appearance changes without app updates. This involves adding the plugin, initializing the service, defining default parameter values in the console or code, fetching and retrieving remote parameters,…
Cloud Functions
Cloud Functions for Firebase is a serverless computing platform that simplifies backend development by allowing developers to write JavaScript or TypeScript code, which runs automatically in response to events from Firebase services or incoming HTTP requests. This framework leverages Google's cloud infrastructure…
Stage 11: Advanced Dart
Advanced Dart
Advanced Dart concepts crucial for Flutter development include generics for reusable code, async/await for clean asynchronous operations, mixins for multiple inheritance, abstract classes for base implementations, streams for continuous event handling, isolates for parallel processing, futures for future value…
Lists
Dart Flutter offers various widgets for displaying lists, including ListView, ListTile, SingleChildScrollView with Column, GridView, and CustomScrollView with Slivers, enabling scrolling lists, grids, and customized item appearances through widgets, layouts, and styling.
Collections
Dart provides built-in collections like Lists (ordered, indexed), Sets (unordered, unique), Maps (key-value pairs), Queues (FIFO), and Stacks (LIFO) for efficient data storage and manipulation, useful in various scenarios like data storage, state management, and algorithm implementation.
Lambdas
Lambdas, also known as anonymous functions, are a fundamental concept in Dart and Flutter. They are a way to create short, inline functions that can be passed as arguments to other functions or assigned to variables.
Functional Programming
Dart supports functional programming through higher-order functions, immutable data structures, lambdas/closures, and pure functions, enabling developers to write code that emphasizes immutability, statelessness, and data transformation via functions.
Isolates
Flutter Isolates are parallel execution contexts that enhance performance and concurrency by running intensive tasks in the background, preventing UI freezes. They provide isolated memory spaces for reliable code, enable concurrent execution, and facilitate inter-isolate communication for data sharing and…
Async / Await
Flutter's async/await pattern simplifies asynchronous programming by enabling code that appears synchronous. The async keyword designates a function as asynchronous, allowing non-blocking execution, while await pauses execution until an asynchronous operation completes, resulting in cleaner and more maintainable…
Core Libraries
Dart has a rich set of core libraries that provide essentials for many everyday programming tasks such as working on collections of objects (dart:collection), making calculations (dart:math), and encoding/decoding data (dart:convert).
Streams
Streams in Flutter are a way to receive data over time as it becomes available. They are similar to observables in other languages and frameworks. Streams can be used for things like getting real-time updates from a server, or listening for changes in user input. In Flutter, streams are represented by the Stream…
Futures
Futures in Flutter are a way of representing a potential value that will be available at some point in the future. Some key points about Futures in Flutter:
Stage 12: State Management
State Management
State management in Flutter refers to the process of managing and updating the data or state of a Flutter application. In Flutter, the state of the widgets can change dynamically, for example, when a user interacts with the application.
ChangeNotifier
Flutter's ChangeNotifier is a fundamental class for state management in Flutter. It allows developers to handle and notify listeners of data changes, ensuring efficient updates to the user interface. By extending ChangeNotifier, developers can create custom classes to represent specific states or data models.…
ValueNotifier
Flutter's ValueNotifier is a lightweight tool for state management in Flutter. It efficiently handles a single value and notifies listeners of changes. With ValueNotifier, developers can easily track and update specific data, such as counters or user inputs. It simplifies state management and enables dynamic…
Redux
Redux is a state management library for Flutter, commonly used with the Flutter framework to manage the application's state. It helps to maintain a single source of truth for the state of the application, making it easier to understand, test and maintain the code. In Redux, the state is stored in a store and can…
Riverpod
Riverpod was created by the same author as Provider, and is designed to make it easier to manage application state by providing a more intuitive API and better performance than Provider.
BLoC
Bloc (Business Logic Component) is a state management pattern used in Flutter to separate presentation logic from business logic. It helps to manage and maintain the app state, making it easier to test, debug, and reuse code. It uses streams to emit new states and reacts to changes in the state.
Provider
Provider is a wrapper around InheritedWidget (base class for widgets that efficiently propagate information down the tree) to make them easier to use and more reusable.
GetX
GetX is a lightweight and powerful solution for state management and navigation in Flutter. It provides a clean and simple API for managing app state and navigating between screens. GetX makes it easy to create scalable and maintainable apps, as it offers a central place to manage the app's state, reducing the…
RxDart
RxDart is a library for Dart that provides additional functionality for working with reactive programming, specifically with the Streams and Observables classes. It extends the standard Dart Streams API and provides additional features such as the ability to transform and combine streams, and to compose and chain…
Stage 13: Reactive Programming
Reactive Programming
Reactive programming is a programming paradigm that allows for handling changing data streams and updating the UI based on those changes.
Stage 14: Animations
Animations
Flutter’s animation support makes it easy to implement a variety of animation types. Many widgets, especially Material widgets, come with the standard motion effects defined in their design spec, but it’s also possible to customize these effects.
Animation Controller
This class lets you perform tasks such as:
Animated Builder
AnimatedBuilder is a widget in Flutter that allows you to build animations. It takes an Animation object and a builder function as input, and it returns a widget that is rebuilt whenever the animation changes. The builder function is called with the BuildContext and the animation object and it should return the…
Animated Widget
AnimatedWidget is a Flutter widget that takes an Animation object as an argument and automatically updates whenever the animation changes. This can be useful when you want to create animations that are tightly coupled to a widget, for example, to animate the size or color of a widget. With AnimatedWidget, you can…
Curved Animation
Curved animations in Flutter can be achieved using the "CurvedAnimation" class. This class takes in a "Curve" object that defines the rate of change of the animation over time. The most commonly used curve is the "Curves.easeInOut" curve, which starts slow, speeds up in the middle, and then slows down again towards…
Hero
Hero is a widget in Flutter that allows you to create smooth animations between screens or within a single screen, for widgets that are used in multiple places. It animates the transition of a widget from one screen to another or from one position to another within a screen. The widget that is being animated should…
Opacity
Opacity is a Flutter widget that allows you to control the transparency of its child widget. It takes a single opacity argument, which is a value between 0.0 and 1.0, where 0.0 represents complete transparency and 1.0 represents complete opacity. The child widget is drawn with the specified opacity, making it…
Stage 15: Flutter Internals
Flutter Internals
The internal workings of Flutter refer to the underlying mechanisms and architecture that make up the Flutter framework. Flutter is a reactive framework for building user interfaces, which means that it allows developers to build dynamic, responsive apps that update automatically in response to changes in the state…
Render Objects
RenderObject's can be defined as "Objects" that render and manipulate layouts, sizes and draw the UI, providing the actual application rendering. They clean up some resources when dispose method is called, therefore it must be disposed by creator when is no longer used.
3 Trees
A tree is a data structure that is used to represent the hierarchy of widgets in a Flutter app. The tree structure allows Flutter to manage the layout, styling, and behavior of the widgets in the app.
Immutability
Immutability in Flutter refers to objects that cannot be changed once they are created. In Flutter, immutability is used to ensure that objects in the widget tree are not modified unexpectedly, which can lead to unexpected behavior and bugs in the app.
Stage 16: Dev Tools
Dev Tools
Flutter DevTools is a suite of development tools provided by Flutter to help developers build, test, and debug Flutter apps.
Flutter Inspector
It is a tool in the Flutter SDK that provides a visual representation of the widget tree in a Flutter app. It allows developers to inspect the widgets in their app, see the properties and styles applied to each widget, and interact with the app in real-time.
Flutter Outline
Flutter Outline is a feature in the Flutter development environment (IDE) that provides a tree-like representation of the widgets and elements in your Flutter app. It shows the hierarchy of the widgets, their relationships, and the structure of your app.
Memory Allocation
Memory allocation is the process of reserving a portion of the device's memory for the use of your app. The memory allocation in Flutter is managed by the Dart virtual machine, which uses a garbage collector to automatically manage the memory used by the app.
Stage 17: Testing
Testing
Testing is a crucial part of the development process in Flutter, as it helps you to verify the behavior and appearance of your app and ensure that it behaves correctly and consistently across different devices and platforms.
Integration Testing
Integration tests in Flutter are tests that verify the behavior of your app as a whole, rather than individual widgets or functions. Integration tests allow you to test the interactions between different parts of your app and verify that the overall behavior of the app is correct.
Unit Testing
Unit testing in Flutter is the process of testing individual units of code, such as functions or classes, to ensure that they behave as expected. Unit testing helps to catch bugs early in the development process and increases the confidence in your code by making it easier to refactor or make changes without…
Widget Testing
Widget testing in Flutter is the process of testing the behavior and appearance of individual widgets, in isolation from the rest of your app. It allows you to verify that a widget works correctly, displays the expected output, and behaves correctly in response to user interactions.
TDD
Test-driven development (TDD) is a software development methodology in which tests are written before the implementation of the code they are testing. The idea behind TDD is to write a failing test first, then write just enough code to make the test pass, and then refactor the code if necessary. This process is…
BDD
Behavior-driven development (BDD) is a software development methodology that emphasizes collaboration between developers, testers, and stakeholders to define and verify the behavior of an application. BDD uses natural language to describe the expected behavior of the application and provides a shared understanding…
Stage 18: CI / CD
CI / CD
CI/CD (Continuous Integration and Continuous Deployment) is a software development practice that helps to automate the process of building, testing, and deploying mobile apps, including Flutter apps.
Fast Lane
Fastlane is a third-party tool for automating the development and deployment process for mobile apps, including apps built with Flutter.
Codemagic
Codemagic is a cloud-based continuous integration and delivery (CI/CD) platform specifically designed for Flutter mobile app development.
Bitrise
Bitrise is a cloud-based continuous integration and delivery (CI/CD) platform that can be used with Flutter mobile app development.
GitHub Actions
GitHub Actions is a workflow automation tool provided by GitHub that can be used to automate various tasks in a Flutter mobile app development process. With GitHub Actions, developers can create custom workflows to automate tasks such as building the app, running tests, and deploying the app to various app stores.…
Firebase App Dist
Firebase App Distribution is a service provided by Firebase, a mobile development platform owned by Google, that makes it easy to distribute pre-release versions of a mobile app to testers and stakeholders.
Segment
Segment is an analytics platform that provides a single API for collecting, storing, and routing customer data from various sources, including mobile apps built with Flutter.
Mix Panel
Mixpanel is a product analytics platform that provides insights into user behavior for mobile apps, including those built with Flutter.
Stage 19: Analytics
Analytics
Analytics is a key aspect of understanding user behavior and measuring app performance for Flutter apps. There are a number of analytics tools available for Flutter apps, each with their own set of features and benefits.
Firebase Analytics
Firebase Analytics is a free analytics tool provided by Google that helps to understand user behavior and measure app performance for mobile apps, including those built with Flutter.
Google Analytics
Google Analytics is a free web analytics service provided by Google that helps to understand user behavior and measure app performance for mobile apps, including those built with Flutter.
Stage 20: Deployment
Deployment
Deployment in Flutter refers to the process of releasing a Flutter app to end-users. Deploying a Flutter app involves a combination of technical skills and experience, as well as knowledge of the relevant app stores and their policies and requirements.
Guidelines & Protocols
Guidelines and protocols are important considerations for Flutter developers as they help to ensure that apps are built in a consistent, reliable, and user-friendly manner. Some of the key guidelines and protocols to consider when developing a Flutter app include:
AppStore
The App Store is Apple's platform for distributing iOS and iPadOS applications. Publishing a Flutter app there requires an Apple Developer account, app metadata, signing with certificates and provisioning profiles, and submitting the build for App Review before release.
Playstore
The Google Play Store is an online store for Android apps, games, and other digital content. It is operated by Google and is the official app store for Android devices.
Questions about the Flutter Roadmap
Is the Flutter Roadmap free?
Yes. All 108 lessons in this roadmap are free to read on Bibha AI Learning Labs, with no account and no payment. Signing in is optional: it lets you mark lessons as done and keep your progress, and it opens the AI tutor, which runs on your own API key.
How long does the Flutter Roadmap take?
There is no fixed duration. It has 108 lessons in 20 stages, and the time it takes depends on how many hours you give it each week. Nothing is locked, so you can skip what you already know, and your progress is saved once you sign in.
Where should I start the Flutter Roadmap?
Start with stage 1, Basics of Dart, and work down in order. The stages are numbered in the order the roadmap suggests, but every lesson is open, so if you already know Basics of Dart you can go straight to Development Environment or anything after it. Each lesson links to free resources for going deeper.
Can I learn Flutter in Hindi?
The lessons are written in English. Once you sign in, you can ask the AI tutor on any lesson to explain it in Hindi or Hinglish. It answers from that lesson’s own text, so the explanation stays on the syllabus. The tutor runs on your own Google, OpenAI or Anthropic key.