Flutter Learning Path

5 min readJul 6, 2019

I wrote a flutter starter kit to demo how to use flutter with useful plugins to build a App Store app. But, some developers ask me how to start with Flutter. So, I write this article to share my learning path for Flutter.

Why choose Flutter?

i wrote my first product — Trigether. I finished my own backend and Android App in 2018 early. After release, some users ask me when iOS version will be released. So, i am thinking whether i should learn how to write iOS app. But, i just one man band to build a product. It will take times to maintain two code based project. 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 just suit on some apps that just require to display information only. One day, my colleague send 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 go in 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 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 platform 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

B) What is Declarative UI

If you came from React Native or ReactJS, you will know it. But, came from others platform. You may not know it. Then you should take a look on 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, for Flutter, it use Dart. Take a look on A tour of the Dart language to learn Dart. I think Dart is very similar to Java.

Advanced Topic: Why use Dart? If you have this question, you can take a look Why Flutter Uses Dart.

D) Lean Flutter UI Framework

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

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

E) Start Hello World

Go though Flutter get start. How to install? How to set editor/ IDE? Create a first Hello Word app. The offical doc will teach you how to do these.

F) State management approach — BLoC

Previously, i wrote in MVVM with Rx pattern on 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 easliy. I like MVVM pattern, but i find that Flutter cannot do the same MVVM pattern as Android. It is becase Android is not buit with Declarative UI. After research, i found that some google guys use BloC pattern to build app. Then i read Architect your Flutter project using BLOC pattern to know Bloc pattern more. Or, you can take a look on Technical Debt and Streams/BLoC, which is provided by Flutter team’s boring show. There exist different state management approachs. You can take a look on others.

Advanced Topic: Write a BLoC pattern. You should know basic Reactive Programming. Please take a look on RxDart. If you are a beginner on 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 app, i would like to find a mechanism to switch pages by Page ID/Name with meta data. A plugin fluro help on this.

H) Localization

You can take a look on A new approach of localization in Flutter written by me. Previouly, i found that the official document is hard to understand. Also, the official way for localization is too inconvenient.

I) Http Client

To commicate with Backend, i prefer to write a clean code on it. So, Dio is a 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 Android community

J) Json serialization

To build pojos, i need a ways to handle json serialization/deserialization. Take a look on JSON and serialization

K) Local Storage

Currently, sqflite 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 ORM library. moor still in a early stage and is not popular. Realm still develop Flutter in progress — Dart / Flutter Support

K) Project Flavour Config

I want to setup a three build config includings Development, Staging and Production. For example, API endpoints are different. Take a look on Creating flavors for Flutter

L) Resources

Open Source: flutter_starter_kit

Enjoy your Flutter learning trip.

— — — — —
Technical Founder in Wenjetso
Wenjetso 搵著數: https://www.wenjetso.com/zh_HK
PlakerLab 創玩坊: https://www.plakerlab.com

Keywords: Travel, Jetso, Jetso Finder, 著數, 著數網, 搵著數