1. Basic concepts

The so-called Route Management is to manage how to jump between pages. It is usually also called navigation management. Route Management in Flutter is similar to native development. Whether it is Android or iOS, navigation management will maintain a route stack. The route push operation corresponds to opening a new page, and the route pop operation corresponds to the page closing operation. Route Management mainly refers to how to manage the route stack.

2. MaterialPageRoute

2.1 Basic definition

MaterialPageRoute is a component provided by the Material component library. It can implement routing switching animations consistent with the platform page switching animation style for different platforms:

• For Android, when a new page is opened, the new page will slide from the bottom of the screen to the top of the screen; when the page is closed, the current page will slide from the top of the screen to the bottom of the screen and then disappear, while the previous page will be displayed on the screen.
• For iOS, when a page is opened, the new page will slide from the right edge of the screen to the left side of the screen until the new page is fully displayed on the screen, while the previous page will slide from the current screen to the left side of the screen and disappear; when the page is closed, just the opposite, the current page will slide out from the right side of the screen, and the previous page will slide in from the left side of the screen.

1
2
3
4
5
6

MaterialPageRoute({
   WidgetBuilder builder,
   RouteSettings settings,
   bool maintainState = true,
   bool fullscreenDialog = false,
})

• builder is a WidgetBuilder callback that constructs the route's content and returns a widget. Typically, this callback returns an instance of the new route.
• settings Contains the configuration information of the route, such as the route name and whether it is the initial route (home page).
• maintainState By default, when a new route is pushed into the stack, the original route will still be saved in memory. If you want to release all the resources occupied by the route when it is no longer used, you can set maintainState to false.
• fullscreenDialog indicates whether the new route is presented as a full-screen modal. On iOS, when fullscreenDialog is true, the page slides in from the bottom of the screen rather than horizontally.

Read more…

1. Three common State Management

• Widget manages its own state.
• Widget manages child Widget status.
• Mixed management (both parent and child widgets manage state).

1.1 Widget manages its own status

1.1.1 Applicable scenarios

If the state is related to the appearance of the interface, such as color, animation, then the state is best managed by the Widget itself.

1.1.2 Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

class TapboxA extends StatefulWidget {
  TapboxA({Key? key}) : super(key: key);

  @override
  _TapboxAState createState() => _TapboxAState();
}

class _TapboxAState extends State<TapboxA> {
  bool _active = false;

  void _handleTap() {
    setState(() {
      _active = !_active;
    });
  }

  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: _handleTap,
      child: Container(
        child: Center(
          child: Text(
            _active ? 'Active' : 'Inactive',
            style: TextStyle(fontSize: 32.0, color: Colors.white),
          ),
        ),
        width: 200.0,
        height: 200.0,
        decoration: BoxDecoration(
          color: _active ? Colors.lightGreen[700] : Colors.grey[600],
        ),
      ),
    );
  }
}

Read more…

1. Widget

1.1 canUpdate method

canUpdate(...) is a static method used primarily to reuse existing widgets when the widget tree is rebuilt.

• The basic function: whether to use the new widget object to update the configuration of the corresponding Element object in the old UI tree.
• Judgment rule: As long as newWidget and oldWidget’s runtimeType and key are equal at the same time, new widget updates the configuration of the Element object, otherwise a new Element will be created.

1.2 Four trees in Flutter

1.2.1 Basic Contacts and Responsibilities

1. Generates an Element tree based on the Widget tree. The nodes in the Element tree all inherit from the Element class.
2. Generates a Render tree (rendering tree) based on the Element tree. The nodes in the rendering tree all inherit from the RenderObject class.
3. Generates a Layer tree based on the rendering tree, and then displays it on the screen. The nodes in the Layer tree all inherit from the Layer class.

• Layout and rendering logic is in the Render tree.
• Element is the glue between Widget and RenderObject.

1.2.2 Example

1
2
3
4
5
6
7
8
9

Container( // A container widget
  color: Colors.blue, // Set container background color
  child: Row( // can arrange the children widget in the horizontal direction
    children: [
      Image.network('https://www.example.com/1.png'), // Showing pictures of widget
      const Text('A'),
    ],
  ),
);

Read more…