Flutter’s 2020 status

Support platform

• Android
• iOS
• Web (Beta) about 1 year ago, it was beta
• Windows (Alpha)

Develop environment

• Android Studio
• VS code
• Emacs(I don’t know)

Language

• Dart

A tour of the Dart language

null safety is still beta.

Architecture

I feel that layer structure of Flutter is more simple than React-Native .

React-Native have some layer for rendering and event communication.

(from Flutter in Action)

Flutter compiler create ARM code when it is built for production binary.

Flutter have hot reload feature.
Hot reload feature load your code on run time.

I think you will feel that it strange to have both hot reload and ARM code.

When you run with debug mode, your application will be executed on DartVM with JIT .

When you run with release mode, your application will be executed as ARM/x86 machine code which is created by AOT(ahead-of-time) .

Platforms

Dart is single thread.

Future is enough for almost of all async task.
If you want to run heavy task in parallel. You have a selection to use Isolate .

Dart asynchronous programming: Isolates and event loops

The behavior of Isolate depends on each platform.
(Flutter for Web, it may not work well, yet??)

From Flutter application, we cannot call platform code(Kotlin/Java/Swift/Objective-C) directly.

We need to use MethodChannel to communicate with platform .

Writing custom platform-specific code

All UI is created with Widgets.

Mainly there are two type widget. StatefulWidget and a StatelessWidget.
A StatefulWidget tracks its own internal state. A StatelessWidget doesn’t have any internal state that changes during the lifetime of the widget.

Introduction to widgets

Fluter widget is inspired from React. If you have some knowledge of React, you’ll feel like you’ve seen it somewhere before.
Flexbox is important for React. It is same with Flutter.
We will not see flexbox directly in Flutter. But idea of flexbox is used in Flutter.
You can see it in source code of Column widget.

flutter/flutter

Knowledge of flexbox will help you to search Widget of Flutter.

State management approach

It seems that there is not de facto standard approach of state management, yet.

There are a lot of idea about it.

List of state management approaches

This document help you to choose approach.

Flutterの状態管理手法の選定

Add-to-App

Add Flutter to existing app

We have a selection to add Flutter to existing app.

App2App have some limitation. I do not think it is better to use it unless there are special reason.

State restoration

You know Android kill your app when memory is not enough. It is common knowledge for Android developers. How should we treat this with Flutter.

Discussion: https://github.com/flutter/flutter/issues/6827
Pull request: https://github.com/flutter/flutter/pull/60375
Design: http://flutter.dev/go/state-restoration-design

Now state restoration was released, you can resolve this problem by using RestorationMixin class.

https://api.flutter.dev/flutter/widgets/RestorationMixin-mixin.html

Other references

• https://flutter.dev/docs/get-started/learn-more
• https://youtube.com/playlist?list=PLjxrf2q8roU23XGwz3Km7sQZFTdB996iG
• https://dartpad.dev/
• https://www.manning.com/books/flutter-in-action
• https://www.amazon.co.jp/Learn-Google-Flutter-Fast-Example-ebook/dp/B07NX3WM6L
• https://github.com/brianegan/flutter_architecture_samples
• https://github.com/wasabeef/flutter-architecture-blueprints

dartpad is usefull tool.

• https://gist.github.com/matsuhiro/29bb6a884331c48abb9091a7f3c9941b

This is gist which has dart code.
If you append hash of gist after dartpad URL like
- https://dartpad.dev/29bb6a884331c48abb9091a7f3c9941b

You can see dartpad which include my dart code.