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!
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
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:
Okay, now that we have learned what Flutter & Dart are, let's start 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.
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.
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 a great 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, then you need to read through this article and many more. So, consider this the first step to great success!
Okay, now it's going to get really hard, but we promise you, once you get through this step, there's a little bit easier stuff to come.
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
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 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
Whooow, 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.
Yay, it's finally time to start programming! No more tedious theory, let's get on with the practice.
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, 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
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 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!
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 like 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/
User inputs are needed in almost every app. Be it for the login, the searchbar 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 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 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!
As you may have noticed, it is sometimes very hard to keep track with 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!
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, WebHosting, Database Storage, Analytics (connected with Google Analytics), Engage (Predictions, A/B Testing...) and Relase & 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 codelab 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, store data in Firebase and we also know where to find help if we don't know how to implement something in our app.
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!
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.
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 more 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 🙂
What is StateManagement? 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 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 learn 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/
A local database is a database that is stored on the 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 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 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
The package moor is also a package based on SQLite, but it is written in native Dart, which means that you can use it on any platform, unlike sqflite. It has many other advantages over sqflite, but it has one disadvantage: it is not as well known as sqflite. It has 472 likes on https://pub.dev (as of October 31, 2021 11:00), which is not exactly little, but in contrast to sqflite, it is relatively little. Fortunately, however, one of the best Flutter YouTubers noticed this great package and did a very detailed series on it in 2019. It may be that some things don't work exactly the same with the latest version, since the series was produced in 2019 as mentioned before. Still, it's a great start and definitely worth checking out:
Reso Coder - Moor - Fluent SQLite for Flutter: https://www.youtube.com/playlist?list=PLB6lc7nQ1n4glsY1J0R6jWirqtURKClz7
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.
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
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!
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 which occurs one after another in other words staggered animations here is another article about it https://flutter.dev/docs/development/ui/animations/staggered-animations. Thats 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 showed here https://material.io/design/motion/understanding-motion.html#principles the material.io team made an excelent 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 some are old but they are great ones and can be easily used with a bit of modication to the code.
Now coming to most important thing that you should take note of, is that how you going to communicate with third party servers/services. What do I mean by that is how you going to send data over the internet if your server is in different state or country. Any idea?
Now thats where HTTP(HyperText Transfer Protocol) comes into play. There are different types of operations you can perform like:
- GET: To get or to retrieve data.
- POST: To add new data.
- PUT: For checking if resource is exists then update , else create new resource.
- PATCH: To update existing resource.
- DELETE: To delete existing resource. We usually call these operations as CRUD (create, read, update and delete). After some basic theory lets move on to practical knowledge.
For sending HTTP requests dart team have created a wonderful package which makes developers work easy.
Using this package you can perform all the CRUD operations.
- 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.
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. Lets 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 computation from UI and do the work in background. So to parse JSON in 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.
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 very detailed:
Johannes Milke - Flutter Tutorial - Localization & Internationalization with INTL & ARB Files: https://www.youtube.com/watch?v=Zw4KoorVxgg
Great, now we have completed another topic!
Slivers in flutter are the most interesting and the most hardest to understand. While slivers a very hard to understand with it you can create really cool ui's with it. But if you used SingleChildScrollView,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 offical 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 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+
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:
Johannes Milke - Flutter Tutorial - Capturing & Playing Audio [2021] Audio Recorder App: https://www.youtube.com/watch?v=64xJO0urK9E
Johannes Milke - Flutter Tutorial - Image Picker From Camera & Gallery | The Right Way [2021] Pick Images & Videos: https://www.youtube.com/watch?v=MSv38jO4EJk
Unfortunately I didn't find a tutorial from Johannes Milke about 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
When building apps with flutter sometimes we might get stuck on implementing some features which flutter can't do because its a platform specific feature for that flutter provides a channel called Platform Channel with which we can call platform specific apis. This is a part where some people get scared even 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, 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 isn't enough docs about EventChannel on the official docs of flutter but there is an excelent 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 webview 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 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!
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.
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.
First, you have to enable Flutter Web Feature into your enviroment. Be sure you have Flutter 2.0, so, first upgrade you're Flutter version with flutter upgrade into your terminal.
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 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.
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 debbug mode in a web nagivator! Flutter Web Support brings the hot reload tool, so, code in real time your web application.
Have you finished code 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.
Now, with Flutter 2.5.2, you can choose between two different renderers. This renders give you the possibility to manage your app performance into 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.
Have you already chosen it? Now, if you're sure to realease 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 debbug 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 in internet.
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 /icons/ folder. You should use the same icon, but with 190 x 190 and 520 x 520 size respectively. When you add your own icons, be sure to use the same name of 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)
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 /buld/web/ directory.
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 active the option "Enforce https". You have to configurate 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.
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:
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
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/
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
Flutter Mapp - https://discord.gg/tPnqsTm5WU
Robert & Tadas - https://discord.gg/NcRT4bPc75
/r/Flutter - https://discord.gg/ckUeC6fsrg
You think you belong on the list? Then write @tomicriedel on Twitter or create a pr with your name on the list.
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.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent