Flutter Learning Path

I wrote a flutter starter kit to demo how to use flutter with useful plugins to build an App Store app. But, some developers ask me how to start with Flutter.

Why choose Flutter?

I finished my own Android App in 2018 early. After release, some users ask me when the iOS version will be released. So, I am thinking about whether I should learn how to write an iOS app. But, I just one-man band to build a product. It will take time to maintain two code-based projects. You will ask, ‘Why not React Native?’ I did not go into React Native as I did not like the architecture because of the bridge of javascript. I think React Native has just suited some apps that just require displaying information only. One day, my friends sent me an article — What’s Revolutionary about Flutter. I am interested in Flutter as it can do a real ‘one code base for many platforms’. So, I went to Flutter.

How to read this article?

You can go through A) to L) one by one because I go through this path when I learned Flutter. For advanced topic, after I started to write the Flutter app, I researched these topics and think it is useful. If you have interest, you can read them.

A) Read Flutter Overview

First of all, what is the difference between Flutter and other platforms like iOS, Android, React Native, and so on? As I came from Android, I read Flutter for Android developers which talks about the difference between Android & Flutter, let you have a quick idea of Flutter.

If you came from others, you can read other documents

• Flutter for iOS developers
• Flutter for React Native developers
• Flutter for web developers
• Flutter for Xamarin.Forms developers

B) What is Declarative UI If you come from React Native or ReactJS, you will know it. But, coming from other platforms. You may not know it. Then you should take a look at Introduction to declarative UI.

C) Learn Dart You may know C#, Java, Koltin, Objective-C, Swift, Javascript, or Typescript to write your app or web. But, Flutter, uses Dart. Take a look at A Tour of the Dart language to learn Dart. I think Dart is very similar to Java.

D) Lean Flutter UI Framework For Flutter, it rebuilds the UI framework, which means that the native SDK or UI libraries may not support it. So, What UI widget can I use? Take a look at the Widget catalog. You will know more about what widget I can use. As I am a visual learner, so I find videos to talk about it. Flutter provides an official youtube channel — Flutter Widget of the Week. You can understand this widget more easily.

Advanced topic: Why does Flutter have high performance on UI? If you have time, please take a look at it as I always write in the wrong way on UI logic which conflicts with the Flutter widget tree. Then always throw errors. Know it more, you can avoid these mistakes.

• Flutter Widget 101
• The Mahogany Staircase — Flutter’s Layered Design
• Flutter’s Rendering Pipeline

E) Start Hello World Go through Flutter gets started. How to install? How to set editor/ IDE? Create a first Hello Word app. The official doc will teach you how to do these.

F) State management approach — BLoC Previously, I wrote in MVVM with Rx pattern on the Android app. Also, I wrote Redux structure on React.js. For State management, following one pattern is better to transfer knowledge to others and maintain code easily. I like the MVVM pattern, but I find that Flutter cannot do the same MVVM pattern as Android. It is because Android is not built with Declarative UI. After research, I found that some google guys use the BloC pattern to build apps. Then I read Architect your Flutter project using BLOC pattern to know Bloc pattern more. Or, you can take a look at Technical Debt and Streams/BLoC, which is provided by the Flutter team’s boring show. There exist different state management approaches. You can take a look at others.

Advanced Topic: Write a BLoC pattern. You should know basic Reactive Programming. Please take a look at RxDart. If you are a beginner in Reactive programming, you can play with RxJS Marbles, which can visualize how Rx operators work.

G) Page Routing How to switch different pages? For Flutter, it provides Navigator functions to switch pages. But, for complex apps, I would like to find a mechanism to switch pages by Page ID/Name with metadata. A plugin Fluro helps with this.

H) Localization You can take a look at A new approach of localization in Flutter written by me. Previously, I found that the official document is hard to understand. Also, the official way for localization is too inconvenient.

I) Http Client To communicate with Backend, I prefer to write a clean code on it. So, Dio is an HTTP client to help on solving it. Currently, I found a new approach — Chopper. I love it as it is similar to Retrofit which is a popular HTTP client in the Android community.

J) Json serialization To build POJOs, I need ways to handle JSON serialization/deserialization. Take a look at JSON and serialization.

K) Local Storage Currently, SQLite is the most popular library to handle SQLite on Android & iOS. For key-value storage, you can use shared_preferences. But, I am looking for an ORM library. moor is still in an early stage and is not popular. Realm still develops Flutter in progress — Dart / Flutter Support.

L) Project Flavour Config I want to set up a three build config including Development, Staging, and Production. For example, API endpoints are different. Take a look at Creating flavors for Flutter.

M) Resources

• awesome-flutter
• pub.dev
• Reddit FlutterDev
• Flutter Documentation
• The Boring Flutter Development Show
• Open Source: flutter_starter_kit

Enjoy your Flutter learning trip ♥

Ahmed Samir. Mobile App Developer.