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?
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
- 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 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
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.
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
Open Source: flutter_starter_kit
Enjoy your Flutter learning trip.