A practical road-map for Flutter development
Flutter is an open-source UI software development kit created by Google and by the time you’re reading this article I’m pretty sure flutter would have got its fame. In this article, I would like to share a learning path for flutter where you can start from scratch to pro in the least time possible. I’m attaching an awesome cool notion document where you can find everything about flutter and it also includes the complete curriculum and free resources, make sure you read till the end.
Introduction
To get a basic idea of the working of flutter, I recommend you read the documentation. I also advise you to start with native android development because when you know the android basics you will start to appreciate flutter and how flutter makes things easy for you.
What is Flutter?
Flutter is an app SDK for building high-performance, high-fidelity apps for iOS, Android, Web (beta), and desktop (technical preview) from a single code base. The goal is to enable developers to deliver high-performance apps that feel natural on different platforms. Dart language is used to program in Flutter.
Why Flutter?
- Hours of development time can be saved by using flutter, it enables us to use a single code base to develop applications for various platforms.
- Hot Reload — You don’t have to stare at your screen for hours to see your changes in development.
- It enables the implementation of cool animations, it supports 60fps animations also.
- Developing beautiful applications with flutter gives a completely new experience.
Now you’ve learned some basic concepts about flutter and it’s time to set up the development workspace. Head to docs to see how to install and set up flutter. For your workflow, I highly recommend vs-code, because its simple, minimal, and cool.
Hello world
Starting with the basics of Dart language, you can skip this if you already know the OOP Concepts. I recommend you skim through the basic programming concepts in Dart and now its time to write your first hello world app with flutter.
Everything in flutter is a widget including pages, text, buttons, containers, etc. Designing Interfaces in Flutter involves creating widgets.You can check out here to start your first hello world flutter app. You can either use your phone or an emulator to run your app using the command “flutter run”.
🎊 Yaay, you’ve completed your first hello world app, now its time to explore again.
Fantastic Widgets and when to use them?
Widgets — As you know, Everything in Flutter is a widget. There are two types of them — Stateless and Stateful. A Stateful widget will show the updates in the UI when something takes place and a stateless widget doesn’t show you any updates. This being a major difference, you can find all the differences between them here.
Build Layouts
Learning by implementing, is the best way to learn. We have to start with knowing about layouts available in Flutter, they are Row, Column, Stack, List. We can build a handful of interfaces with Flutter. We can also clone the famous app interfaces like Whatsapp, Snapchat, Instagram, Facebook, etc.
I think now you are familiarized with how to design interfaces. The next step is how to optimize them. We have to minimize the widget tree so that our app will stay cool in the long run.
Animations
After building a couple of layouts now it’s time to add some animations to the interfaces. We need to know what are the readily available animated tools like Hero, AnimatedContainer. You can start here to learn about animation tools.You can find more animated designs on Dribble, Behance, and some amazing pages are available on Instagram too.
You can also implement a 60FPS animation in Flutter and for advanced animations, you can try rive and new animations package.
Structuring Code
One of the biggest problems we generally face in Flutter is structuring our code. It involves a lot of work, but once we master the art of structuring everything will be a cakewalk. The beginner level structuring involves the following folders :
Structuring is not just limited to what is specified here, it gets better and better through practice.
Fetch data from the Internet
Now it’s time to write some code to get data from some external APIs. To perform this you need to learn about JSON Serializing and Data Modelling. Try to get data from APIs and show it in the UI and also try to implement caching where you try to learn how to manage local storage and shared preferences. You can start here to learn fetching data. My suggestion for this stage is to build Movies App, Weather App, and Pokemon App.
State Management
As you’ve learned to implement data fetching, its time to focus on state management. You have to learn various state management techniques available in flutter like, provider, scoped model, bloc, mobx. State management is a must-have concept in Flutter when you’re trying to build highly scalable apps.
Firebase
Here comes the cool part. When Firebase is integrated with Flutter a lot can be achieved. You can create a social app similar to Instagram, Facebook. You can create an e-commerce app like amazon and Flipkart. You can also create chat apps like — WhatsApp, Snapchat, and also video sharing apps like youtube, TikTok. It is entirely dependent on your creativity and the efforts you can put in. Firebase is the best combo for Flutter. Spend some time in learning the Firebase concepts and you’re good to go.
Testing
We often ignore this part but this is the most important one. Start with types of tests available in Flutter — Unit Test, Widget Test, Integration Test. Start to write tests and when your tests are passed you’ll feel confident. Testing enables us to check whether the app is working the way we expect it to.
Clean Architecture
You’ve come a long way and here is the core part of the framework. Master the architectural patterns that let you write production-ready code for the applications and deployment. Some of the clean architecture I recommend is FilledStack’s MVVM Style, Resocoder Clean Architecture with TDD. There are many available such as — MVP, Bloc style, etc. You can find it here. Now with all of your knowledge, build a highly scalabe app.
Congrats, You made it
Now, You can call yourself as #FlutterPro, yeah you are actually. Now its time to share your knowledge to the communities.
Immerse in Communities
Gitter
You can join the Gitter chat to get connected with people who have had hands-on experience with Flutter. You can ask questions about what you are not able to solve, to get relevant answers that might be helpful.
Flutter Weekly
To get new weekly insights about flutter, flutter weekly says it all. It delivers information about the latest flutter news, articles, and jobs among others.
Follow the Official @flutterdev handle on Twitter:
Follow the official @flutterdev twitter handle to get the latest updates on twitter and opportunities.
Flutter Community
You can join the Flutter Community on medium. It always feels good to be part of a developer community because it gives a sense of belonging.
Conclusion
There are some courses out there but I believe self-learning is the best. However, you can take help whenever you feel like it. I’m linking an awesome notion document here, clone it, and use it to track your learning. Keep posting your learning and document your dev journey. Thanks for reading this, you have a lot of patience and something to learn. If you like the article, you can support me by 👏 . And follow me on Twitter!
The Cover Photo by Markus Spiske from Pexels
