A practical road-map for Flutter development

MOhan Talupula
May 10 · 7 min read
Photo from Pexels

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.

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.

  • 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.
docs are always boring, but flutter is awesome

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! Now you’re a rocking app dev.

🎊 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.

cool, right?

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 :

a sample structuring of my code

Structuring is not just limited to what is specified here, it gets better and better through practice.

Fetch data from the Internet

API Fetching is damn easy, right?

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

Fix app crashes with 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.

you made it 🎊

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

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.

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 twitter handle to get the latest updates on twitter and opportunities.

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

Flutter Community

Articles and Stories from the Flutter Community

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store