Flutter online programming practice summary

1.Flutter architecture

Flutter's architecture is mainly divided into three layers: Framework, Engine, and Embedder.

1. The Framework is implemented using dart, including Material Design style Widgets, Cupertino (for iOS) style Widgets, text/picture/button and other basic Widgets, rendering, animation, gestures, etc. The core code of this part is: the flutter package under the flutter warehouse, and the io, async, ui and other packages under the sky_engine warehouse (dart: ui library provides the interface between the Flutter framework and the engine).

2.Engine is implemented using C++, mainly including: Skia, Dart and Text. Skia is an open source 2D graphics library that provides a common API suitable for a variety of software and hardware platforms.

3. Embedder is an embedding layer, which embeds Flutter into various platforms. The main work done here includes rendering Surface settings, thread settings, and plug-ins, etc. As can be seen from here, Flutter's platform-related layer is very low. The platform (such as iOS) only provides a canvas, and all the remaining rendering-related logic is inside Flutter, which makes it have good cross-end consistency.

2.Flutter view drawing

For developers, the most used one is the framework. I will start from the entry function of Flutter and go down step by step to analyze the principle of Flutter view drawing.

In a Flutter application, the simplest implementation of the main() function is as follows

// 参数app是一个widget，是Flutter应用启动后要展示的第一个Widget。
void runApp(Widget app) {
  WidgetsFlutterBinding.ensureInitialized()
    ..scheduleAttachRootWidget(app)
    ..scheduleWarmUpFrame();
}

1.WidgetsFlutterBinding

WidgetsFlutterBinding inherits from BindingBase and mixes in many Bindings. Looking at the source code of these Bindings, you can find that these Bindings basically monitor and process some events of the Window object (including some information about the current device and system and some callbacks of the Flutter Engine), and then These events are packaged, abstracted and distributed according to the Framework model.

WidgetsFlutterBinding is the "glue" that connects the Flutter engine and the upper Framework.

1. GestureBinding: Provides the window.onPointerDataPacket callback, binds the Framework gesture subsystem, and is the binding entry point for the Framework event model and underlying events.

2. ServicesBinding: Provides the window.onPlatformMessage callback, which is used to bind the platform message channel (message channel) and mainly handles native and Flutter communication.

3. SchedulerBinding: Provides window.onBeginFrame and window.onDrawFrame callbacks, monitors refresh events, and binds the Framework drawing scheduling subsystem.

4. PaintingBinding: Binding drawing library, mainly used to handle image caching.

5. SemanticsBinding: The bridge between the semantic layer and the Flutter engine, mainly the underlying support for auxiliary functions.

6. RendererBinding: Provides callbacks such as window.onMetricsChanged and window.onTextScaleFactorChanged. It is the bridge between the rendering tree and the Flutter engine.

7. WidgetsBinding: Provides callbacks such as window.onLocaleChanged and onBuildScheduled. It is the bridge between Flutter widget layer and engine.

WidgetsFlutterBinding.ensureInitialized() is responsible for initializing a global singleton of WidgetsBinding. The code is as follows

class WidgetsFlutterBinding extends BindingBase with GestureBinding, ServicesBinding, SchedulerBinding, PaintingBinding, SemanticsBinding, RendererBinding, WidgetsBinding {
  static WidgetsBinding ensureInitialized() {
    if (WidgetsBinding.instance == null)
      WidgetsFlutterBinding();
    return WidgetsBinding.instance;
  }
}

Seeing that this WidgetsFlutterBinding is mixed with (with) a lot of Bindings, let’s look at the parent class BindingBase first:

abstract class BindingBase {
   ...
  ui.SingletonFlutterWindow get window => ui.window;//获取window实例
  @protected
  @mustCallSuper
  void initInstances() {
    assert(!_debugInitialized);
    assert(() {
      _debugInitialized = true;
      return true;
    }());
  }
}

I saw the code Window get window => ui.window is the interface that connects to the host operating system, which is also the interface that Flutter framework uses to connect to the host operating system. There is a Window instance in the system, which can be obtained from the window attribute. Take a look at the source code:

// window的类型是一个FlutterView，FlutterView里面有一个PlatformDispatcher属性
ui.SingletonFlutterWindow get window => ui.window;
// 初始化时把PlatformDispatcher.instance传入，完成初始化
ui.window = SingletonFlutterWindow._(0, PlatformDispatcher.instance);
// SingletonFlutterWindow的类结构
class SingletonFlutterWindow extends FlutterWindow {
  ...
  // 实际上是给platformDispatcher.onBeginFrame赋值
  FrameCallback? get onBeginFrame => platformDispatcher.onBeginFrame;
  set onBeginFrame(FrameCallback? callback) {
    platformDispatcher.onBeginFrame = cal