Flutter Roadmap

In this repository you will learn Flutter from scratch and become a real pro. You will become familiar with the programming language Dart and the framework Flutter through many practical examples and this from 100% free resources.

For you it's just one click, but it means a lot to the team of this repository if you star this repository ⭐️

You think a topic needs improvement or a complete topic is missing? Then check out How to Contribute.md and help us make the dream of a completely free Flutter course a reality!

What is Flutter?

In the beginning, of course, you need to know what Flutter is. There are many short but very good videos on Youtube.

Here are the best I could find:

London App Brewery - What is Flutter?: https://www.youtube.com/watch?v=I9ceqw5Ny-4

Google Developers - Introducing Flutter: https://www.youtube.com/watch?v=fq4N0hgOWzU

Fireship - Flutter in 100 seconds (my favorite for short explanations): https://www.youtube.com/watch?v=lHhRhPV--G0

In a nutshell, Flutter is this:

Flutter is Google's portable UI toolkit for crafting beautiful, natively compiled applications for mobile, web, and desktop from a single codebase. Flutter works with existing code, is used by developers and organizations around the world, and is free and open source. Flutter primarily uses Dart (a language also developed by Google).

Source: https://www.codegrepper.com/search.php?q=what is flutter

What is Dart?

Okay, now we have clarified what Flutter is. Next, we'll take a look at what Dart actually is, because this is the programming language you'll be programming in.

Again, there is a video on YouTube, which will help you there:

Google Developers - Introducing Dart: https://www.youtube.com/watch?v=5KlnlCq2M5Q

Maybe this explanation is not enough for you and you want to understand a bit deeper what Dart is. You need to know that Dart and Flutter have great docs and you could theoretically learn everything from them. That's why I found an overview about Dart here:

https://dart.dev/overview

Okay, now that we have learned what Flutter & Dart are, let's start installing Flutter & Dart.

Installing Flutter & Dart

Installing Flutter & Dart is relatively easy once you understand how to do it.

Since Flutter's documentation is so great, I'm linking all the articles you need here so you have a complete Flutter setup.

Windows Install: https://flutter.dev/docs/get-started/install/windows

Macos Install: https://flutter.dev/docs/get-started/install/macos

Linux Install: https://flutter.dev/docs/get-started/install/linux

Chrome OS Install: https://flutter.dev/docs/get-started/install/chromeos

For all links you should go at least from step 1-3. After that you will have Flutter completely set up. I highly recommend using VSCode, as all the extensions I mention in the rest of this repository are for VSCode.

The Ultimate Flutter Setup

Wait a minute... we're not done installing Flutter yet?

Yes, basically we are. You could create your first apps right now. But, there are so many more things that will make you a real productivity beast in Flutter.

Robert Brunhage once made a video called "The Ultimate Flutter Setup 2021".

It's best to start with this video:

Robert Brunhage - The Ultimate Flutter Setup: https://www.youtube.com/watch?v=HhumfOSYFNc

Since not everything is really direct for Flutter, here are all the timestamps you should definitely check out:

Extensions: 0:26-3:41

2:26 Pubspec Assist - Since version Flutter 2.5, the standard Flutter extension has exactly the same features built in as Pubspec Assist, so you don't need to install that package anymore.

Snippets: 3:41-4:40

CI/CD: 8:37-9:59

FVM: 9:59-10:53

In this video is not properly explained how to set up FVM, that's why he made a seperate video about FVM, where he explains what FVM is, how to set it up and use it in his projects. Robert Brunhage - Flutter Productivity Beast - FVM: https://www.youtube.com/watch?v=l5HsXg5KlYE

Linting: 10:53-12:42 (end)

The video was made before Flutter 2.5. Since Flutter 2.5 exists, linting is included by default in every project, which means you don't need to use an extra package for it, in my opinion.

Okay, now we already have the first killer things set up that clearly make us more productive, but a few things are still coming from my side that you should add.

Let's start with the extensions:

I downloaded a few more extensions than Robert Brunhage has, which I will introduce here:

Flutter Color: Flutter Color is one of the best flutter extensions available. It automatically detects if you have entered a color somewhere. Then. it shows you a little box to the left of it with the color you wrote in the code. If you click on this box, you get a color picker, with which you can select a color, which is then automatically written into the code.

Awesome Flutter Snippets: Flutter snippets are very helpful, but configuring them all yourself can be a pain. That's why this extension offers many more snippets that will make your work much more productive.

I will add more extensions as soon as I find new ones.

Dart Syntax & Basics

Before we really get started, we need to understand the programming language we are programming in. That's why we're going to take a look at the syntax of Dart.

As already mentioned 2x, Dart has an excellent documentation, so there is a Language Tour in the Docs. This is very long, I know that, but if you have read and understood this article, then you can definitely say that you understand the Dart syntax and can already code in Dart.

Dart - Dart Language Tour: https://dart.dev/guides/language/language-tour

We know it sounds like a boring task to you, but without taking away your motivation: If you want to master Flutter & Dart properly, you need to read this article and many more. So, consider this the first step to great success!

But there is also an easier way to learn Dart. You can take the free course by Rivaan Ranawat, which teaches you everything about Dart. You will be able to skip all the following Dart sections if you finish this 8-hour course: Rivaan Ranawat - Dart Programming Tutorial For Absolute Beginners | Master Dart In 8 Hours | Flutter Tutorial Pt 1: https://www.youtube.com/watch?v=Fqcsow_7go4&t=559s

Effective Dart

Okay, now it will get really hard, but we promise you, once you get through this step, there's a little bit easier stuff to come (As already mentioned above, you can also take the 8-hour course by Rivaan Ranawat. Rivaan Ranawat - Dart Programming Tutorial For Absolute Beginners | Master Dart In 8 Hours | Flutter Tutorial Pt 1: https://www.youtube.com/watch?v=Fqcsow_7go4&t=559s

We want to understand darts really well because after this course you should really be able to create your dream apps. That's why I have to torture you with 4 more articles now, unfortunately.

To read the 4 more articles properly, here's how you should read these 4 guides (a very short article:

Effective Dart - https://dart.dev/guides/language/effective-dart

Now we come to the 4 important articles:

Effective Dart: Style - https://dart.dev/guides/language/effective-dart/style

Effective Dart: Documentation - https://dart.dev/guides/language/effective-dart/documentation

Effective Dart: Usage - https://dart.dev/guides/language/effective-dart/usage

Effective Dart: Design - https://dart.dev/guides/language/effective-dart/design

Flutter Widgets

Now we finally start working with Flutter. Flutter is based on widgets, as you should have learned by now. So now let's take a look at what Flutter widgets are and also look at the most important of them. As always, the documentation can answer that for us (don't worry, we'll be using other sources soon). So, let's read through the Introduction to Widgets:

Introduction to widgets: https://flutter.dev/docs/development/ui/widgets-intro

Wow, a lot was explained there. Of course, not every widget was explained. There are hundreds if not thousands of widgets in Flutter, but it is not necessary to know them all. As time goes by, you will learn more and more widgets, either through tutorials or just research on the internet. In this course, you will also get to know a lot more widgets.

Create your first Flutter Apps

Yay, it's finally time to start programming! No more tedious theory, let's get on with the practice.

There are two ways you can continue from here: You can

Just continue reading this and clicking on the links, doing the projects etc.
My recommended way: Do the 13-hour course by Rivaan Ranawat about Flutter. You will be able to skip a huge amount of topics in this list and learn all the basics: Rivaan Ranawat - Flutter Tutorial For Beginners in 13 Hours: https://www.youtube.com/watch?v=BiOSCpV-lts&t=308s

If you have chosen to just continue reading, then continue here:

Your first Flutter App will be an infinite list of randomly generated Startup Names. This is a project created by a Flutter expert at Google and presented at the Google IO Event 2021. In this video, everything will be explained to you and you will already get to know the first new widgets.

Flutter - Building your first Flutter app | Workshop: https://www.youtube.com/watch?v=Z6KZ3cTGBWw

Let's go, we have created our first Flutter app, we have to celebrate that 🥳 !

Now let's have a quick look at a Crash Course by Robert Brunhage, in which he creates a net worth app. There was even a contest at the end, which I (Tomic Riedel), the author of this section actually won. Even if you can't win anything more, this app is another very good start to get started in Flutter.

Robert Brunhage - Flutter Crash Course 2021 - Build a Net Worth Application: https://www.youtube.com/watch?v=ktDo9wH4W_4

My respect, you have now already built 2 Flutter apps, and you have taken the first important steps to become a pro!

As they say, all good things come in threes, so here comes the third app and the last, for this section. Watching this video, you'll probably think to yourself, "I've learned all this already". And yes, that's true. In this video, we will again briefly summarize everything we have learned so far, but we will learn a few more things there, which are important.

Flutter - How do I make my first Flutter app: https://www.youtube.com/watch?v=xWV71C2kp38

Improve your UI skills in Flutter

Now that we've looked at how to create your first Flutter apps, let's take a look at how to create a beautiful UI in Flutter. There's a great YouTube channel called The Flutter Way that creates the best UIs in Flutter you've ever seen. So here you will get a list of UI Speed Codes where you will learn many things like Animations, Dark & Light Theme and Responsive Design. You can, if you want, just watch them, since there is no talking there unfortunately, or you can code along yourself, which we recommend, since you will learn much better that way. You will be able to see for yourself what will change after a hot reload and you can learn a lot from that as well.

So here is your list:

The Flutter Way - Flutter Custom Animation - Grocery App - Speed Code: https://www.youtube.com/watch?v=vCQQJ42zC58&t=49s

The Flutter Way - Analog Clock Light & Dark Theme - Flutter UI - Speed Code: https://www.youtube.com/watch?v=u6Cfzng3Gek

The Flutter Way - Flutter Fully Responsive Design for Web, Tab, and Mobile: https://www.youtube.com/watch?v=0mp-Ok00WZE

Wow, you have now learned how to use Text, RichText, Containers, Shadow and much more. On top of that, you've learned how to create custom animations, bring Dark & Light Theme into your app and even create Responsive designs. That was a lot and you just took a huge step. We'll take a closer look at Animations, Dark & Light Theme, and Responsive Design later, as there are several solutions there and some tutorials from The Flutter Way already have newer solutions for them. The main purpose of this section was simply to teach you UI design in Flutter.

By now you have learned how to add packages to the pubspec.yaml file, but what are packages and what is the difference between a package and a plugin? That's what we're going to look at now.

Packages and Plugins

Packages and plugins can save you many hours of time. If you need a special widget, animation, or backend manager, maybe someone has already developed something for it. And the probability is very high for that because thousands of people publish packages on pub.dev. So in short, it's one of the most important things in Flutter & Dart. Now what exactly packages are and how you can add them is explained to you, as always, by Flutter. https://flutter.dev/docs/development/packages-and-plugins/using-packages (Don't worry, this article is not as long as others 😉 )

But, We are writing about packages AND plugins all the time. This doc only very briefly explained what the difference is, so now let's take a look at a video from Flutter about it:

Flutter - Packages versus Plugins? | Decoding Flutter: https://www.youtube.com/watch?v=Y9WifT8aN6o

Respect! You have already reached the next level to become a Flutter developer!

Theming

You've already learned a lot about theming in the last tutorials, maybe you knew, maybe you didn't. Now, let's take another look at how it works and what it does exactly, so let's get right into it.

Again, theming is explained to us very well by the Flutter Docs, so, as always, let's take a look there ;) https://flutter.dev/docs/cookbook/design/themes

Great, now we have also learned how to use themes, but in Flutter we can also do so much more. For example, we can use downloaded fonts that are not already implemented in Flutter. Therefore, let's take a look at that as well. https://flutter.dev/docs/cookbook/design/fonts

There is also the possibility to import fonts from a package (the one we looked at before). We will read how to do that and then we are almost done with the theming. https://flutter.dev/docs/cookbook/design/package-fonts

We can import files like videos, images, etc. from the assets in a similar way as with fonts. For this, we do something similar to importing fonts: https://flutter.dev/docs/development/ui/assets-and-images

Great, now we are done with theming, let’s continue!

Oh, and a little tip on the side: There is a very popular package called google_fonts. You can use 977 fonts from fonts.google.com directly. https://pub.dev/packages/google_fonts/

Working with user inputs and forms

User inputs are needed in almost every app. Be it for the login, the search bar, or other things. And you've already worked with this a lot, but let's take another look at what's behind it, as this is a very important topic in Flutter.

And this time, we're not going to draw on the Flutter documentation. We will look at a YouTube channel called "Johannes Milke" as our main source this time. He has made two very good videos on TextFields and Form & TextFormFields.

What is the difference between TextField and TextFormField is what we will look at first. Flutter Agency has written a very good article on this: https://flutteragency.com/what-is-the-difference-between-textformfield-and-textfield-in-flutter/

Okay, now that we have that cleared up, we can move on to the first widget, the TextField. A full DeepDive on this widget was done by Johannes Milke on his YouTube channel:

Johannes Milke - Flutter Tutorial - TextField - Deep Dive: https://www.youtube.com/watch?v=C5hJIKCTrvk

Great, so now we know how the TextField widget works. Now let's take a look at how the TextFormField widget works with the Form widget. Again, Johannes Milke has created a very good video which we will now look at:

Johannes Milke - Flutter Tutorial - How To Use Form and TextFormField [2021 UPDATE]: https://www.youtube.com/watch?v=2rn3XbBijy4

Great, then we have taken another big step and now we are slowly getting into the more challenging area.

Routing and Navigation

Routing is one of the most important things you need as a Flutter developer because you will very rarely create an app that has a single screen. And also this has been shown to you in other videos, but we really want to understand what it all means and how it works.

One of the best YouTube channels for Flutter, Reso Coder, did a great tutorial on routing. Let's take a look at this one now.

Reso Coder - Flutter Routes & Navigation - Parameters, Named Routes, onGenerateRoute: https://www.youtube.com/watch?v=nyvwx7o277U

If you want, you can also read through the Navigator class in the docs again:

https://api.flutter.dev/flutter/widgets/Navigator-class.html

Great, now we already know the basics. But there is now a Navigator 2.0, which is more or less liked by the Flutter community. Nevertheless, it is important to know how it works. That's why we're going to look at an article on Medium that explains how we can use Navigator 2.0:

John Ryan - Learning Flutter's new navigation and routing system: https://medium.com/flutter/learning-flutters-new-navigation-and-routing-system-7c9068155ade

And again, we have completed a very important topic. You will soon be a Flutter Pro!

Responsive Design

Responsive Design is what we need to give our depending on the window size a certain look. Again, you've already learned this, but as always, let's dive more into it.

Robert Brunhage made a video on Responsive Design where he explains the different possibilities very well:

Robert Brunhage - Flutter Responsive Design Guide: https://www.youtube.com/watch?v=EH92XnCU1Cc

Attention!: This video was produced before the version Flutter 2.0, in which there was no Null Safety, but it was released after that. You can find the code in Null Safety format in his writeup of the video: https://robertbrunhage.com/videos/flutter-responsiveness

You are making good progress!

App Architecture

As you may have noticed, it is sometimes very hard to keep track of all the widgets, as it is common knowledge that flutter code can get messy very quickly. That's why it's important to find a proper app architecture.

We offer you here two architectures that you can learn:

The first one is from Reso Coder. Everything is described in great detail, but the downside is that this architecture is a bit outdated. I think it's still good to learn this architecture if you want to create your own later because after watching this tutorial series you will know exactly what to look for.

Caution!: You will have to invest a lot of time in this module (7+ hours)

Reso Coder - Flutter TDD Clean Architecture: https://www.youtube.com/playlist?list=PLB6lc7nQ1n4iYGE_khpXRdJkJEp9WOech

The second architecture I found on Medium by Chinmay Mourya. This one is from September 2020. It is not the newest architecture, but a very good and tidy one. Moreover, you don't have to invest a lot of time to understand this architecture completely. Chinmay Mourya - Flutter scalable folder & files structure: https://medium.com/flutter-community/flutter-scalable-folder-files-structure-8f860faafebd

Okay okay, that was a lot at one time, but we promise you it was really worth it! Now we will continue with some difficult topics, but in this topic, we will build complete apps very often!

Flutter & Firebase

Firebase is a Backend as a Service (BaaS) product developed by Google to make app development a lot easier. It offers tons of features, such as Authentication, web hosting, Database Storage, Analytics (connected with Google Analytics), Engage (Predictions, A/B Testing...), and release & Monitor (Crashlytics, Performance...). As you can see, Firebase offers a lot of functionalities and therefore it is very important to know it well.

Since there are so many functionalities, we will really only cover the basics now, but you can implement just about any functionality of Firebase into your app using the FlutterFire Docs.

We're going to take a look at how you can authenticate a user and store data in Firebase using a code lab from Firebase:

Firebase - Codelab: Get to know Firebase for Flutter: https://www.youtube.com/watch?v=wUSkeTaBonA

You can also find many great articles on this page from Flutter: https://flutter.dev/docs/development/data-and-backend/firebase

Great, we now know how to manage users, and store data in Firebase, and we also know where to find help if we don't know how to implement something in our app.

Flutter & Supabase

Supabase calls itself an alternative to Firebase. And in my opinion, it is. A huge advantage is that you can host it on your own server, but also that Supabase is open source. Also, this company is currently growing very fast, so it's a huge advantage if you start learning it now, so you'll have an advantage over newcomers later when Supabase is very big.

Okay, now enough of the long introduction, let's get started:

The first thing we need to do is understand Supabase and how to use each of its features. For this, Traversy Media has made a great tutorial, which you should definitely check out:

Traversy Media - Supabase Crash Course: https://www.youtube.com/watch?v=7uKQBl9uZ00

Okay, we now know how Supabase works, but we haven't written a single line of code in Dart yet. Since Supabase is very small, unlike Firebase, as I said before, there are very few tutorials about it. So now we have to refer to the documentation: https://supabase.io/docs/guides/with-flutter

I highly recommend doing the bonus part!

Great, now we have also learned the next technology in combination with Flutter!

You are making very good progress!

Flutter & Amplify

Amplify is also a service like Firebase and Supabase, only this one is from Amazon. Since this service is also one of the biggest and you might need it later, we'll now look at how to build your app with Amplify.

We'll be helped by Amplify's documentation:

https://docs.amplify.aws/lib/q/platform/flutter/

(We recommend doing all parts of Flutter in the documentation).

And now we are done with Amplify.

Which BaaS should I use?

Now that we've looked at all the different Backend as a Service providers, the question naturally becomes, which one should you use for your app? And as you can probably already guess: It all depends.

If you want to build an app with simple authentication, data storage, etc., I can highly recommend Supabase. It's very easy to use in my opinion and you can build it into your app very quickly.

If you need things that are a bit fancier, then you need to be able to assess for yourself what you should choose. I can tell you that Firebase is definitely easier to learn, but it's not meant for building apps that could get very big (even though it's always marketed that way).

I hope I was able to give you a little push to make your decision 🙂

State Management

What is state management? Which StateManagement solution is the best? Why do I need external StateManagement solutions? StateManagement is very much discussed in the Flutter community and is one of the most important topics in Flutter. We can't answer any of the questions exactly, but there are some very good videos and articles that explain StateManagement very well. But, before we do that, we need to know what State means in the first place. And this is where the official YouTube channel of Flutter helps us:

Flutter - What is State?: https://www.youtube.com/watch?v=QlwiL_yLh6E

After answering this question, let's read the 5 articles about StateManagement from the Flutter Docs: https://flutter.dev/docs/development/data-and-backend/state-mgmt

Another very good resource to learn StateManagement is the Grand Tour from Fireship. It is a bit outdated and some things are not included there, however, it is super explained and definitely worth watching:

Fireship - Flutter State Management - The Grand Tour: https://www.youtube.com/watch?v=3tm-R7ymwhc&t=2s

As you have learned from the previous resources, there are many StateManagement solutions. But which are the most famous ones and what are their advantages and disadvantages? This is explained very well by Tadas Petra in one of his videos:

Tadas Petra - Top 10 State Management for Flutter: https://www.youtube.com/watch?v=o4bgDqO4pGk

Riverpod

Riverpod is an increasingly popular state management solution, which is simply a better/rewritten version of Provider. It is the solution I can personally recommend the most.

A very good start to learning Riverpod is the Riverpod documentation: https://riverpod.dev/docs/getting_started

But if you prefer to learn Riverpod from YouTube, I recommend this video, which came out just a few weeks ago and is very up-to-date (at the time this was written - 05/21/2022):

Reso Coder - Riverpod 2.0 - Complete Guide (Flutter Tutorial): https://www.youtube.com/watch?v=Zp7VKVhirmw

Here is the written out version of the video if you prefer to read or while watching it also read through it:

https://resocoder.com/2022/04/22/riverpod-2-0-complete-guide-flutter-tutorial/

Using local database

A local database is a database that is stored on a cell phone. You're wondering why you need it, right? Well, for example you need a local database to check if the user opens the app for the first time or which theme the user has selected. But you can also use local databases for many other things, like offline access to the data.

There are many different database packages on pub.dev, which are explained now.

Shared preferences

shared_preferences is not a real database, so you can't think of it as SQL, but it is very useful and used in many projects. You can use this package to store small data like strings, bools, or an int under a specific variable. You do this for example if you want to set a bool whether the user has been in the app before or not. This information in turn is useful to show the user an onboarding screen or something else.

A great tutorial on shared preferences has been created by Johannes Milke:

Johannes Milke - Flutter Tutorial - Shared Preferences - Store & Load Data For Data Persistence: https://www.youtube.com/watch?v=szOllHT1S7Y

Sqflite

sqflite is a database system for Android, iOS, and macOS that is built on the principle of SQLite. So simply put, this is the right package if you want to store data in SQL tables. A great tutorial for sqflite is provided by Johannes Milke:

Johannes Milke - Flutter Tutorial - SQL Database Storage Using Sqlite & Sqflite CRUD | Android & iOS: https://www.youtube.com/watch?v=UpKrhZ0Hppk

Another quick explanation is also available on the official Flutter Channel:

Flutter - sqflite (Flutter Package of the Week): https://www.youtube.com/watch?v=HefHf5B1YM0

Hive

Now we come to another database type. Hive is a package that offers you NoSQL capabilities. This package is also written in native Dart code and even offers encription, which I think can be very important. Also here ResoCoder has created a great tutorial, which we will have a look at now.

Reso Coder - Hive (Flutter Tutorial) - Lightweight & Fast NoSQL Database in Pure Dart: https://www.youtube.com/watch?v=R1GSrrItqUs

But since this video is also from 2019, let's take a look at another video by Johannes Milke:

Johannes Milke - Flutter Tutorial - Hive NoSQL Database In 16 Minutes & Hive CRUD | Android, iOS & Web: https://www.youtube.com/watch?v=w8cZKm9s228

The latest video I could find is from Flutter Mapp. Here Hive is explained in under 8 minutes: Flutter Mapp - Flutter Hive Explained under 8 Minutes: https://www.youtube.com/watch?v=L-oUzgxOfdY

Wow, now you are a real local database specialist! Let's move on to the next topic right away.

Error Handling

It can happen very often that an error happens in your app for which you can't be held responsible. Maybe the API is not working properly (we have already learned how to work with APIs and Rest APIs), the user is not connected to the Internet and much more. This is annoying, of course, but this is exactly the kind of situation you need error handling for. You check, so to speak, if an error occurs, whereupon you then execute a certain action. If there is no error, then you can just continue and if there is, then you might show the user that something went wrong. Now let's look at how we implement this.

When Reso Coder makes a video about a topic, it is very well done. So now let's take a look at ResoCoder's two videos on Error Handling:

Reso Coder - Proper Error Handling in Flutter & Dart (#1 - Principles): https://www.youtube.com/watch?v=NoZde-wYGA4&t=27s

Reso Coder - Functional Error Handling in Flutter & Dart (#2 - Either, Task, FP): https://www.youtube.com/watch?v=ZTU-WWEOoII

Sending push notifications

Many apps nowadays use push notifications to "lure" their users back into the app. They are also used to remind users about something and much more. For this reason, you should know how to send push notifications in Flutter.

For this, Johannes Milke has created two great tutorials:

Johannes Milke - Flutter Tutorial - Local Push Notifications 1/2 [2021] Android & iOS: https://www.youtube.com/watch?v=bRy5dmts3X8

Johannes Milke - Flutter Tutorial - Customize Local Push Notifications 2/2 [2021] Background, Custom Sound, No Sound: https://www.youtube.com/watch?v=X3tAGnGc_t0

Now we have learned something again! You are becoming a real flutter pro!

Flutter Animations

We have come to the most fun and my favorite part Animations. Animations makes your ui look alive and provides a great ux. Now this is a topic most people get scared of but fear not animations in Flutter are the most easiest with a few lines of code you can create so beautiful animations.

This article from Flutter's official docs will help you get started. And if you need animations that occur one after another in other words staggered animations here is another article about it https://flutter.dev/docs/development/ui/animations/staggered-animations. That's it for resources from the official docs.

This is a bit old but this playlist is from the official flutter youtube channel and its one of the best out there:

Flutter - Making Animations in Flutter: https://www.youtube.com/playlist?list=PLjxrf2q8roU2v6UqYlt_KPaXlnjbYySua

This is a big one but its worth looking at:

Flutter - Flutter Europe: Animations in Flutter done right: https://www.youtube.com/watch?v=wnARLByOtKA&t=1480s

If you need the animations shown here https://material.io/design/motion/understanding-motion.html#principles the material.io team made an excellent package for just that https://pub.dev/packages/animations. (One tip if you need some resources about UI and UX always look at Material Design docs).

Here is another great video about Staggered Animations from Reso Coder:

Reso Coder - Staggered Animations Made Simple – Flutter Simple Animations Tutorial: https://www.youtube.com/watch?v=LB3f6gjbX1g&t=102s

And some other great videos from the same author:

Reso Coder - Flutter Animation Tutorial – Refactoring with AnimatedWidget & AnimatedBuilder: https://www.youtube.com/watch?v=o-h_e4b71o8
Reso Coder - Flutter Animation Tutorial - Understand the Basics & Animate with Ease: https://www.youtube.com/watch?v=txLvvlooT20

All the resources I mentioned are animations done using code but if you need 3d animations that you can draw look at Rive

Now all the resources I mentioned are old but they are great ones and can be easily used with a bit of modification to the code.

Flutter Sending HTTP Requests

Now coming to the most important thing that you should take note of, is how you going to communicate with third-party servers/services. What I mean by that is how you going to send data over the internet if your server is in a different state or country. Any idea?

Now that's where HTTP(HyperText Transfer Protocol) comes into play. There are different types of operations you can perform like:

GET: To get or retrieve data.
POST: To add new data.
PUT: For checking if a resource exists then update, else create a new resource.
PATCH: To update existing resources.
DELETE: To delete existing resources. We usually call these operations CRUD (create, read, update, and delete). After some basic theory let's move on to practical knowledge.

Sending HTTP request from Flutter

For sending HTTP requests dart team has created a wonderful package that makes developers' work easy.

http package

Using this package you can perform all the CRUD operations.

All CRUD operations Step by Step

This article will walk you through how to retrieve or to GET data from servers.
This article will walk you through how to send or to POST data to servers.
This article will walk you through how to update or to PUT and PATCH data to servers.
This article will walk you through how to remove or to DELETE data from servers.

Some advanced concepts

Now you have learned how to perform all the CRUD operations. Clap for yourself beacuse you are 80% done to master the HTTP concept.

Now comes the tricky part. Let's say you are getting huge JSON data from your server and parsing these JSON takes time. So sometimes it might create some buggy UI or jank to avoid this we usually isolate these expensive computations from UI and do the work in the background. So to parse JSON in the background we can follow this tutorial provided by Flutter team https://flutter.dev/docs/cookbook/networking/background-parsing.

By now you have become PRO in handling any kind of HTTP request.

And you can learn more about networking by following this link.

Multi-Language Support

An app that is offered in multiple languages and is understandable for the whole world is what every app developer wants. Of course, we don't teach you how to learn different languages, but rather how to get the different languages into your app. For this, we use INTL & ARB files, as this is one of the most used systems. A very good tutorial about this has been made by Johannes Milke, which explains everything in very detail:

Johannes Milke - Flutter Tutorial - Localization & Internationalization with INTL & ARB Files: https://www.youtube.com/watch?v=Zw4KoorVxgg

Great, now we have completed another topic!

Flutter Slivers

Slivers in Flutter are the most interesting and the hardest to understand. While slivers a very hard to understand with it you can create really cool things with it. But if you used SingleChildScrollView, or ListView then you already used Sliver because they use slivers under the hood. To get some fancy scrolling effects you need to give one level deep of the ListView and SingleChildScrollView which is CustomScrollView and NestedScrollView. Here is a very detailed video from the Flutter boring show

Slivers Explained - Making Dynamic Layouts (The Boring Flutter Development Show, Ep. 12) https://www.youtube.com/watch?v=Mz3kHQxBjGg

here is another video from a session on Google/IO 2021 Building scrolling experiences in Flutter | Workshop https://www.youtube.com/watch?v=Mz3kHQxBjGg

and a good article on the official flutter docs

https://flutter.dev/docs/development/ui/advanced/slivers

Here is a good video from Code with Andrea

Flutter Slivers Overview: SliverAppBar, SliverPersistentHeader https://www.youtube.com/watch?v=E3-WdYBrEDc

Robert Brunhage has one too

Flutter - Collapsing Toolbar | Sliver App Bar https://www.youtube.com/watch?v=I26rzdjqVXA

these 2 videos are old, but they explain it really well.

Here are 2 example gists that I did with slivers https://gist.github.com/IsmailAlamKhan/d1693a753a791801682a53d4b02b2092 https://gist.github.com/IsmailAlamKhan/ac1ce99647ccd6b9b5c931e5c4c92f59

Here is a great answer about how to keep the footer always at the bottom of the screen from Rémi Rousselet(the author of Provider and riverpod) https://stackoverflow.com/a/49621060/13842958

After you get got at Slivers you might find that there are some things missing in the Slivers flutter gives you out of the box for that this package got you covered https://pub.dev/packages/sliver_tools+

Using native device functionalities

Native device functionalities are things like microphone usage, camera, picture gallery and GPS. You can also use such things in Flutter and we will now look at how to do this.

As you should have noticed during the course, Johannes Milke always creates very good tutorials on certain topics. And he has created great tutorials on this topic as well:

Microphone usage

Johannes Milke - Flutter Tutorial - Capturing & Playing Audio [2021] Audio Recorder App: https://www.youtube.com/watch?v=64xJO0urK9E

Camera & Gallery

Johannes Milke - Flutter Tutorial - Image Picker From Camera & Gallery | The Right Way [2021] Pick Images & Videos: https://www.youtube.com/watch?v=MSv38jO4EJk

Location

Unfortunately, I didn't find a tutorial from Johannes Milke about the Location of the user, however, Flutter made a great tutorial about the package location:

Flutter - Location (Flutter Package of the Week): https://www.youtube.com/watch?v=65qbtJMltVk

Running Native Swift, Objective-C, Java, or Kotlin Code

When building apps with Flutter sometimes we might get stuck on implementing some features which Flutter can't do because it's a platform-specific feature for that flutter provides a channel called Platform Channel which we can call platform-specific APIs. This is a part where some people get scared even though I got scared because I am not a native Android or ios developer. But the docs of Android and flutter are so good I figured it out in a day.

One thing to note is that using Platform Channels to communicate to the platform takes some time it should be avoided as long as you have an option to do that with pure dart code.

Writing custom platform-specific code. This will help get you started to write platform-specific code, it has all the things you need to know about Platform Channels.

There are 2 types of Platform Channels one is called MethodChannel and another one is called EventChannel. MethodChannel does what it says it does, and lets you call methods from the platform. EventChannel on the other hand will help you listen to events from the platform an example would be listening to sensors. Now the problem is there aren't enough docs about EventChannel on the official docs of Flutter but there is an excellent article An In-Depth Dive Into Streaming Data Across Platform Channels on Flutter

Sometimes you might need to show a native view in your Flutter app as a widget for example web view Flutter's got you covered for that too with PlatformViews Hosting native Android and iOS views in your Flutter app with Platform View.

You can also use dart:ffi to call native C API's which is much faster than Platform Channels Binding to native code using dart:ffi

Testing

Testing is a very important skill you need in Flutter to publish your app. Nobody likes buggy apps with lots of bugs, and that's why you use testing (as the name suggests) to test your app. There are many great tutorials on this, which are listed below:

Reso Coder - Flutter Integration Test Tutorial + Firebase Test Lab & Codemagic: https://www.youtube.com/watch?v=izajHHFSa8o

Robert Brunhage - Flutter Testing For Beginners - The Ultimate Guide: https://www.youtube.com/watch?v=RDY6UYh-nyg

Flutter Explained - Automate your Testing on Devices with Flutter Integration Testing: https://www.youtube.com/watch?v=WPEsnJgW99M

Flutter - Testing Flutter Apps - Making Sure Your Code Works (The Boring Flutter Development Show, Ep. 21): https://www.youtube.com/watch?v=bj-oMYyLZEY&t=2258s

Wow, now you've learned a lot about testing, let's continue!

Deploying your app to the App Store & Google Play Store

Wow, you're almost at the end of the course now. Of course, now you want to publish your app to the App Store and Google Play Store. There is a detailed explanation for each platform in the Flutter Docs, so let's start with Android now. https://flutter.dev/docs/deployment/android I also found a video from Johannes Milke about this, which explains this process in great detail:

Johannes Milke - Flutter Tutorial - How To Publish Flutter App On Play Store [2021] Build, Release & Deploy App: https://www.youtube.com/watch?v=g0GNuoCOtaQ

Now let's take a look at how we make our app available to iOS users. https://flutter.dev/docs/deployment/ios If you want to watch a video on this, I found one from MSJD Coding:

MSJD Coding - Build and Release Flutter App to App Store 2021: https://www.youtube.com/watch?v=akFF1uJWZck&t=3s

Very nice. Next, let's look at how to deploy our Flutter app to Windows, macOS, and Linux.

Debugging, Building, and Deployment for a Flutter Web App

Flutter's code for Web and Mobile it's the same! Do not forget that. When you code a mobile application with Flutter, you simultaneously create the code for a web application, but, you have to compile it to Javascript code, first.

Debugging

Enabling Flutter Web Support

First, you have to enable Flutter Web Feature in your environment. Be sure you have Flutter 2.0, so, first upgrade you're Flutter version with flutter upgrade into your terminal.

The newest versions of Flutter enable automatically the web support, but, be sure with flutter config --enable-web into your terminal.

Finally, to create the folders of web support, position them into your flutter project, and run flutter create . into the terminal. With this command, you make sure that the yourProject/web/ folder is now active.

Running your Web App

As you know, Flutter only be able to make Progressive Web Applications, i.e Single Page Applications; keep this in mind when deciding if Flutter Web is ideal for your own project.

If you run flutter devices into your terminal, you would be seeing some web navigator as connected devices; like Chrome, or Edge. In this case, do flutter run -d <navigator_name> e.g, if you have Chrome connected, do:

flutter run -d chrome

Now, you're running your app in debug mode in a web navigator! Flutter Web Support brings the hot reload tool, so, code in real time your web application.

Building

Have you finished coding your app, and do you want to release it to the public? You have to build it first. And take care of the options you have.

Web Renders

Now, with Flutter 2.5.2, you can choose between two different renderers. This renders give you the possibility to manage your app performance in the web navigators:

HTML renderer

Uses a combination of HTML elements, CSS, Canvas elements, and SVG elements. This renderer has a smaller download size.

CanvasKit renderer

This renderer is fully consistent with Flutter mobile and desktop, has faster performance with higher widget density, but adds about 2MB in download size.

If you do not specify the web render in a debugging or building, you are optimizing for download size on mobile browsers and optimizing for performance on desktop browsers, with the auto-default render.

Building with a Web Render

Have you already chosen it? Now, if you're sure to release your app, do:

flutter build web --web-renderer <renderer_name> --release

For HTML renderer:

flutter build web --web-renderer html --release

For CanvasKit renderer:

flutter build web --web-renderer canvaskit --release

You can try the renders in debug and profile mode, with:

flutter run -d chrome --web-renderer <renderer-name>

flutter run -d chrome --web-renderer <renderer-name> --profile

When you build your app, a new directory has created: yourProject/build/web/ 👈🏻 This is the folder that contains your web app; the folder you will deploy on internet.

Deploying

With a deploying, you should give final details into your build/web/ folder:

Change the default favicon.png file. This icon will appear in the browser tab whe someone mark as favorite your web site. Use the same file name.
Change the default icons of the /icons/ folder. You should use the same icon but with 190 x 190 and 520 x 520 sizes respectively. When you add your own icons, be sure to use the same name as the default files.
Go to manifest.json and change..
- name.
- short-name.
- background-color.
- theme-color.
- description.
Attributes value, to your own app qualities.
Go to version.json and change the value of version and build_number, to your own data.
VERY IMPORTANT: Go to your index.html file, and find the head >> base >> href tag. On it, add the link of the DNS server on which the app will be hosted, and add a / int the start and end of the link. For example:

<base href="/https://flutter-roadmap.com/">

(Nope, this link does not work :C)

Deploying Free on GitHub Pages

For deploying a Flutter Web App, you have to create a new repository to host the build app (not the dart code project), and update on it your /build/web/ directory.

The default GitHub Page URL is:

https://yourGithubUser.github.io/yourRepositoryName/

For example:

https://arhcoder.github.io/eight-queens-game-web/

Use these link to put into your index.html >> head >> base >> href tag, with the instructions previously given, BEFORE YOU UPDATE THE REPOSITORY WITH THE BUIL WEB APP.

NOTE: You can edit the HTML tags of the index.html file like title, and description content, for more details.

Now you are ready to deploy your Flutter Web App! Push your files into your repository, then go to Settings in your GitHub repo, and find the headland GitHub Pages; on it, activate the GitHub Page option reading the docs/ on the master branch.

NOTE: If you want to use your own Domain Name on GitHub Pages deployment, select "root/" instead of "docs/", then add your custom domain name on the specific bar, and finally activate the option "Enforce https". You have to configure your domain provider dashboard to point your Github repo.

YOU DID IT!

Your Flutter Web App is now on the internet. You know what's the link, so, share with the world your new Web Application.

Important links for further learning

Now we have really reached the end of the course. You haven't learned everything about Flutter by a long shot. You've learned the most important topics, how to program your own app, and much more. To learn even more about Flutter, here are people, websites and more to learn more about Flutter:

YouTube Channels

Rivaan Ranawat - https://www.youtube.com/@RivaanRanawat

Robert Brunhage - https://www.youtube.com/c/RobertBrunhage

Tadas Petra - https://www.youtube.com/c/TadasPetra

Flutter Mapp - https://www.youtube.com/c/FlutterMapp

Reso Coder - https://www.youtube.com/c/ResoCoder

Flutter (Official channel) - https://www.youtube.com/c/flutterdev

The Flutter Way - https://www.youtube.com/c/TheFlutterWay

Johannes Milke - https://www.youtube.com/c/JohannesMilke

Flutter Community - https://www.youtube.com/c/FlutterCommunityVideos

Code with Andrea - https://www.youtube.com/c/CodeWithAndrea

Medium Channel

Flutter - https://medium.com/flutter

Tadas Petra - https://tadaspetra.medium.com

Robert Brunhage - https://robertbrunhage.medium.com

Tomic Riedel (self promotion) - https://tomicriedel.medium.com

Tim Sneath - https://timsneath.medium.com/

Twitter Accounts

Flutter - https://twitter.com/flutterdev

Code with Andrea (Andrea Bizzdisotto) - https://twitter.com/biz84

Tadas Petra - https://twitter.com/tadaspetra

Robert Brunhage - https://twitter.com/robertbrunhage

Tomic Riedel (self promotion) - https://twitter.com/tomicriedel

Discord

Rivaan Ranawat - https://discord.gg/B4eVKqtubV

Flutter Mapp - https://discord.gg/tPnqsTm5WU

Robert & Tadas - https://discord.gg/NcRT4bPc75

/r/Flutter - https://discord.gg/ckUeC6fsrg

Do you think you belong on the list? Then write @tomicriedel on Twitter or create a pr with your name on the list.

The End

You are now a true flutter pro! There is a lot of work in this repository, so we would be very happy if you give it a star ⭐️.

If you learn new topics in your Flutter career and think this should be added to this repository, you should follow the rules in How to Contribute.md.

A huge thank you goes out to the people who helped even before this project was released: @arhcoder @IsmailAlamKhan @ChiragKr04 (Tomic Riedel worked on it too, of course, but he is the owner of this repository, so this should go without saying)

Another thank you goes out to @tadaspetra who as a Google Developer Expert in Dart & Flutter checked this repository for correctness in the first version.

Name		Name	Last commit message	Last commit date
Latest commit History 90 Commits
How To Contribute.md		How To Contribute.md
README.md		README.md

Tomic-Riedel/Flutter-Roadmap

Folders and files

Latest commit

History

Repository files navigation

Table of contents