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