1. Flutetr shortcuts for Android Studio

  • option(alt) + enter: selectedStatelessWidgetconvertStatefulWidget 。
  • option(alt) + enter: selectedWidgetThe outer envelope is covered withWidget 。
  • option(alt) + enter: will be selectedWidgetRemoval does not affect the interior. This combination of shortcuts can do a lot of things.
  • AS to the right of theFlutterLineSelect control selectextract xxx: Extracts the associated code into a method orbuildFrom the insideWidgetExtract to a separateWidget 。
  • AS to the right of theFlutterLine, the selectedchildrenClick ^V adjust: move up and down to adjustchildrenThe order.
  • commond + option(alt) + b: View all implementation classes of the abstract class.
  • command+n: Quick generationgetter.setter.toString.construtorMethods.

2. How are the Flutter images rendered

Skip the native framework and feed data directly to the GPU and CPU through the SKia engine without going through intermediate states. Skia (c++ library) Google’s official graphics rendering engine.

3.StatelessWidgetandStatefulWidgetThe difference between

You can find this by looking at the source code of the Widget

@immutable abstract class Widget extends DiagnosticableTree { // ... Omit code}Copy the code

Classes or subclasses specified by the @immutable annotation must be immutable, so data defined in widgets during development is immutable and should be modified with final.

3.1 StatelessWidget: There is no state to maintainwidget

  • Their data is usually written to death; fromparent widgetIs passed in and cannot be modified once passed in; fromInheritedWidgetGet data for use.
  • performbuildMethods and timing:

    When ourStatelessWidgetThe first time is inserted intoWidgetIn the tree (when it was first created); Be our fatherParent WidgetWhen a change occurs, the sonWidgetWill be rebuilt; If ourWidgetRely onInheritedWidgetSome of the data of,InheritedWidgetWhen data is changed;

3.2 StatefulWidget: statefulwidget

Since widgets are immutable, how do statefulwidgets store mutable state?

  • FlutterwillStatefulWidgetTwo classes are designed: one class inherits fromStatefulWidgetAs aWidgetA part of a tree; A class inherits fromState, for recordingStatefulWidgetThe changing states, and based on the changing states, new ones are constructedWidget;
  • whenFlutterIn the buildWidget Tree, will getState“And it callsbuildMethod to obtainStatefulWidgetWish to buildWidget; Save the state to be saved inStateIn the.
  • StatefulWidgetLife cycle: from creation to destruction

    First, executionStatefulWidgetRelated methods in:
    • performStatefulWidgetConstructor to create theStatefulWidget;
    • performStatefulWidgetthecreateStateMethod to create a maintenanceStatefulWidgettheStateObject;

    Second, callcreateStatecreateStateObject is executedStateClass related methods:

    • performStateClass Constructor to createStateObject;
    • performinitStateWe usually do some data initialization in this method, or we might send a network request;
    • performdidChangeDependenciesMethod, which is called in two cases: calledinitStateWill call; Change when you rely on some data from other objects, such as the InheritedWidget we mentioned earlier.
    • FlutterperformbuildMethod, let’s look at our currentWidgetWhich widgets need to be rendered;
    • The currentWidgetIs called when no longer in usedisposeCarrying out destruction;
    • Manual callsetStateMethod is called again based on the latest state (data)buildMethod to build the correspondingWidgets;
    • performdidUpdateWidgetThe way is to be a fatherWidgetWhen rebuild is triggered, the system invokesdidUpdateWidgetMethods;
    • Complex version tag (see source code for details) :mountedisStateA property set internally;dirty stateiselementA property of the tag force callbuildTo buildwidget;clean stateThe currentbuildOut of theWidgetThe next redraw check does not require a rebuild.

4.buildContextWhat is the

BuildContext is just an abstract class with two methods, one that returns a widget and one that returns buildOwner. Everything is a widget. We write UI interfaces by building nested widgets, but a widget isn’t really what’s displayed on the screen, it’s just configuration information. It is always immutable and can be reused in many places. What is actually displayed on the view? It is the View tree element Tree.

  • We are inbuildFunctioncontextIn fact, it can be understood as the presentwidgetThe Element object created.
  • StatelessWidgetInherited:widgetAn override method increateElementreturnStatelessElement. Mount the StatelesseElement object to the Element tree.StatelessElementinheritanceComponentElementAnd there arebuild Method, passed inthiswillelementItself as aBuildContextThe incoming.ComponentElement inheritanceElement.BuildContextInterface is used to block pairsElementA direct operation on an object.
  • StatefulWidgetThe first is also calledStatefulWidgetthecreateElementMethod and according to thiswidgetgenerateStatefulElementObject and keep itwidgetReferences. Will thisStatefulElementMount to theElementThe tree. According to the widgetcreateStateMethod to createState.StatefulElementThe objectstatethebuildMethod, and willelementItself as aBuildContextThe incoming.

5. Three Trees of Flutter (render flow)

5.1 the Widget

  • Widgets are description files that are constantly built as we make state changes. The framework will be compared to the previous description to update the rendering interface with minimal overhead.

5.2 Element

  • Element is the detailed location of an instance of a Widget in the tree
  • Widgets describe and configure what subtrees look like, while Elements actually configure specific locations in the Element tree.

5.3 RenderObject

  • Renders an object in the tree
  • The RenderObject layer is the core of the rendering library

6. Underlying principles of Flutter_boost

7. The plugin

8. Picture display optimization (external texture)