“This is the 10th day of my participation in the November Gwen Challenge. See details of the event: The Last Gwen Challenge 2021”.

Dart we have analyzed the project structure of Flutter. Today we will look at this code in Main.dart

void main() {
   runApp(const MyApp());
}
Copy the code

Flutter program entry

The main method is generally the entry to the Flutter App, which internally applies the whole Widget to add and run by calling the runApp method. And we can call runApp again at different times, such as when the app starts with a blank screen due to data loading and so on. This can be done by calling runApp several times. A simple example is as follows:

void main() {

  runApp(const SplashScreen()); //

  Future.delayed(Duration(seconds: 10), () {
       runApp(const MyApp());
   });
}
Copy the code

runApp

To implement the Widget externally by calling the runApp method, let’s look at the implementation of the runApp method as follows:

void runApp(Widget app) { WidgetsFlutterBinding.ensureInitialized() .. scheduleAttachRootWidget(app) .. scheduleWarmUpFrame(); }Copy the code

Here you can see three lines of code representing the three steps to start the Flutter App:

  • WidgetsFlutterBindingInitialization (ensureInitialized()), andFlutter EngineTo communicate.
  • Bind the root node to create the famous three trees of flutterscheduleAttachRootWidget(app)) layout.
  • Render the laid out tree (scheduleWarmUpFrame())

WidgetsFlutterBinding today we will talk about WidgetsFlutterBinding, but also say WidgetsFlutterBinding, because the back two learn by themselves is still half a bucket of water 😭.

What is WidgetsFlutterBinding?

The official documentation for Widgets Binding, as well as the annotations in the source code, says:

The glue between the widgets layer and the Flutter engine.
Copy the code

You can see SystemChannels used to set up communication (methodChannels) with engines (systems in other locales).

mixin WidgetsBinding on BindingBase, ServicesBinding, SchedulerBinding, GestureBinding, RendererBinding, SemanticsBinding { @override void initInstances() { super.initInstances(); _instance = this; . SystemChannels.navigation.setMethodCallHandler(_handleNavigationInvocation); . return true; } ()); }Copy the code

The WidgetsFlutterBinding is inherited from BindingBase with a number of xxXBindings. WidgetsFlutterBinding will be the core bridge between the Widget architecture and the Flutter Engine, as well as the core of the entire Flutter application layer. Using the ensureInitialized() method we get a global singleton WidgetsFlutterBinding.

Explain a bit about the various bindings.

  • ServicesBinding: The Flutter System platform listens for binding classes for messages. That is, Platform communicates with the Flutter Layer related services and registers and listens for application lifecycle callbacks.
  • SchedulerBinding: Draws the binding classes of the scheduler, debugs the duration of the drawing process, and other operations that occur in compile mode, including Flutter.
  • GestureBinding: A Flutter Gesture event binding that handles screen event distribution and event callbacks. The key to its initialization method is callback event handling_handlePointerDataPacketThe window function is assigned to the window property so that it can be called when it receives screen events. Instances of window are used by the Framework Layer and Engine bridge Layer to handle screen events.
  • RendererBinding: The engine between the render tree and the Flutter Binding class, the internal focus is to hold the root node of the render tree.
  • SemanticsBinding: The semantic tree between engines and the Flutter Binding class.

Sometimes we’ll find some app before you run the application and Flutter Engine to communicate, so want to WidgetsFlutterBinding first. The ensureInitialized () in advance.

void main() {
   WidgetsFlutterBinding.ensureInitialized();
   runApp(const MyApp()); //
}
Copy the code

SystemChannels

Inside the Binding initializer there is this sentence:

SystemChannels.navigation.setMethodCallHandler(_handleNavigationInvocation);
Copy the code

If you click into the SystemChannels source code, you can see that the content uses methodChannels, EventChanne, and life cycle stuff. A simple table summarises the following (which may not be complete). :

species role Flutter Service
lifecycle The life cycle widget
navigation navigation widget
system bindingThe use of widget
accessibility Auxiliary functions (such as reading text messages) PlatformViews, Semantics
platform System Settings (picture rotation, etc.) SemanticsService,RouteNotificationMessages etc.
platform_views Platform-specific view actions AndroidView, UiKitView
skia Graphics engine –
keyEvent Key input RawKeyEvent
textInput Text input TextInput, AndroidView, UiKitView

WidgetsBindingObserver

WidgetsBindingObserver WidgetsBindingObserver WidgetsBindingObserver WidgetsBindingObserver WidgetsBindingObserver WidgetsBindingObserver WidgetsBindingObserver

class _MyHomePageState extends State<MyHomePage> with WidgetsBindingObserver { AppLifecycleState _state; @override void initState() { super.initState(); WidgetsBinding.instance.addObserver(this); } @override void dispose() { WidgetsBinding.instance.removeObserver(this); super.dispose(); } @override void didChangeAppLifecycleState(AppLifecycleState state){ print('state = $state'); }}Copy the code