I’ve been learning about Flutter for a few weeks now. At first, I was very resistant to the idea of infinite nesting of UI code, which really bothered me as a drag and drop UI writer. However, as I learned more about Flutter, I realized that the increase in UI code nesting compared to flutter was negligible.

The dart language

Language is still important. Just like learning Java language before learning Android, learning Flutter can be twice as effective only when language proficiency is achieved. Dart language syntax is very similar to Java, if you have Java background to learn DART very quickly.

Dart has some syntax to be aware of:

  • Each class is an interface. Dart does not have the interface keyword, so if you use implements, the members of a class are treated as interface definitions. Such as:

    abstract class Person { String _name; void greet(); void walk(); Void eat() {print(' eat '); } } class Teacher implements Person { @override void greet() {} @override void walk() {} @override void eat() {} @override get _name => ''; @override set _name(String __name) { _name = __name; }}Copy the code

As you can see, when Person is implemented, it generates an interface. All methods must be implemented, and fields need to implement get and set methods.

  • Mixins feature. Mixins are a way to reuse class code in multiple class hierarchies. To implement mixins, create a subclass of Object without declaring constructors or calling super. Such as:

      class Programmer with Person {
    @override
    void greet() {
      // TODO: implement greet
    }
  
    @override
    void walk() {
      // TODO: implement walk
    }
  }
Copy the code

Since Person has abstract methods, it needs to be implemented. Without declaring constructors or calling super, person reuses the eat method and the name field in person.

  • Typedefs. Because dart functions are also types, we can specify an alias for the function when we need to use that type. The alias represents the type of the function. Such as:

      typedef Compare = int Function(Object a, Object b);
Copy the code

  • The async and await keywords support asynchronous programming, allowing you to write asynchronous code similar to synchronous code, which is already supported in many languages.

flutter

For Flutter, you should first learn about Flutter Chinese based on the official documentation. If you have learned everything in the official tutorial, you can basically start flutter development.

  • The layout constraints of a flutter

In Flutter, widgets are rendered by their underlying RenderBox object. Render frames are constrained by their parents and resize themselves within those constraints. Constraints are composed of minimum width, maximum width and height. Dimensions consist of specific widths and heights.

A container with no children will try to be as large as possible if the container’s constraints are limited, and a container with no constraints will try to be as small as possible. Not absolutely, but it depends on how RenderBox subclasses layout according to constraints.

  • StatelessWidget and StatefulWidget

Statelesswidgets are stateless and are recreated when something needs to change. Statefulwidgets are stateful and can save their state. SetState is called to change the content when it needs to change.

For StatelessWidgets and StatefulWidgets, they just combine basic widgets to build complex UI, but they don’t participate in the actual layout rendering. RenderObjectWidget controls layout and rendering. Many basic widgets are subclasses of this widget.

  • Relationships among Widgets, Elements, and RenderObjects

      Describes the configuration for an [Element]
Copy the code

    What a Widget actually does is describe how to create an Element. A Widget is an immutable object in the entire UI. It is simply used to create Element configuration information.

      An instantiation of a [Widget] at a particular location in the tree
Copy the code

    Element is an instance of a widget. When the widget is active, the widget creates an Element that is inserted into the widget via mount method. When the widget is deActive, The Element is removed from the WidgetTree using the unmount method.

      An object in the render tree.
  
  The [RenderObject] class hierarchy is the core of the rendering
  library's reason for being.
Copy the code

    RenderObject is an object in the render number. The entire inheritance structure is the core of the view rendering library. In fact, it is responsible for all the layout, drawing, and event response.