“This is the first day of my participation in the Gwen Challenge in November. Check out the details: The last Gwen Challenge in 2021”

Dart file generated a lot of code by default. At this point, the code was not clear to us. So we learned about the Flutter components from scratch, cleared the main.dart file, and wrote the interface ourselves. Step by step familiar with the construction process of Flutter interface;

Import header file

We import a UIKit framework to write UI controls in iOS projects. The same applies to Flutter. In Flutter, we import a framework called Material.

import 'package:flutter/material.dart';
Copy the code

This library is similar to UIKit in iOS, which is an asset library;

Note: If the file is imported but not used, the import may disappear when the cursor is clicked elsewhere.

Everything has its widgets.

When we are doing iOS development, we often use UIView. In Flutter, the corresponding control is called a Widget. Everything is a Widget.

It all starts with runApp

In iOS we place containers on UIWindow. On Flutter, if we need to display the interface, we need to execute the runApp() method first

void main() {
  runApp(

  );
}
Copy the code

We need to pass in a Widget in the runApp function;

Two simple widgets

Center

We start by displaying a Center on the screen. The Widget’s name is to display the control in the middle of the view.

void main() {
  runApp(
    Center(
      
    )
  );
}
Copy the code

In Center, there is a child, which means similar to subView in iOS, and holds child controls.

Text

We’ll add a Text in Center that displays the Text:

void main() {
  runApp(
    Center(
      child: Text(
        'First line of code',
        textDirection: TextDirection.ltr,
      ),
    )
  );
}
Copy the code

• textDirectionforFlutterIn theTextUnique property, if not written, hereTextControl cannot be displayed, can be understood as the reading direction of the text,ltrIs from left to right,rtlIs from right to left, but it looks the same;

At this point, we find that our code will issue a warning message:Will appear when you move the cursor to the yellow dotted line position💡(light bulb), click and prompt message appears:The final code becomes:

void main() {
  runApp(
    const Center(
      child: Text(
        'First line of code',
        textDirection: TextDirection.ltr,
      ),
    )
  );
}
Copy the code

Add const to Center and it will become a constant. Because the Center component does not change dynamically, the Flutter will recommend that it be const.

Run the code and it looks like this:

There are two widgets in the interface: Center and Text.

Learn about Flutter

The rendering mechanism of Flutter

The rendering mechanism of Flutter is called incremental rendering. This rendering mechanism also makes Flutter efficient.

So what is incremental rendering? When we want to change the style of UIView in iOS, we can just call its properties to change it; But in Flutter, if we want to change the effect of view1, we need to create a view2, replace view1 with view2, and re-render this part of the control.

A control marked as const will not change (static), so a control marked as const will not change in the rendering tree of a Flutter.

There are no layers in Flutter; When debugging in Xcode, the Flutter view has only one layer; It’s hard to start with UI when you’re working backwards;