Farmers in yards world, beautiful application experience, from the programmer for the processing of detail, and self requirements state, agriculture in the yard a member of the young people is busy, every day, every week, can leave some footprints, is the creation of content, there is a persistent, is I don’t know why, if you lost, might as well to Chou Chou code track of farmers.

  • Beautiful musical beats take you through the coding process of this effect
  • Insist on every day, is the pursuit of every ideal youth
  • Follow in the footsteps of young people, and maybe your answer is right here
  • Take a look here if you’re confused

In 2020, I summarized the use of Bloc, Provider and Stream cross-component communication. If you are interested, you can take a look

  • The Flutter Provider communicates asynchronously and manages the Provider status

  • BLoC asynchronous communication, basic use of BlocBuilder, preliminary study of BlocProvider

  • A countdown feature implemented by Flutter StreamBuilder

  • The Flutter StreamBuilder updates data asynchronously

  • The Flutter StreamController communicates asynchronously and the Streamr stream communicates asynchronously

  • Flutter ValueNotifier communicates asynchronously and ValueListenableBuilder updates data asynchronously

In 2021, the Provider will be expanded to 5.0, making it more convenient to use, so I re-recorded a tutorial, you can click here to see [netease Cloud Video Courses]; Of course, we can also pay attention to the public number, video tutorial is the first in the public number of free broadcast, there will be technical content released every day.

Preparation of GetX before use

First you need to add dependencies

  get: ^4.13.
Copy the code

Then you need to guide the package when you use it

import 'package:get/get.dart';
Copy the code

The first step to use GetX

The first step is to replace the MaterialApp at the entrance of the program with GetMaterialApp as follows:

import 'package:flutter/material.dart';
import 'package:get/get.dart';

// Program entry
void main(a) {
  runApp(RootApp());
}

class RootApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // Use GetX first step
    return GetMaterialApp(
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      // Static path
      routes: {
        "/testa": (context) => TestAPage(),
      },
      // The default home page is displayedhome: MyHomePage(), ); }}Copy the code

Dynamic routing

By default, the TestAPage page is opened in Navigator mode, and a route to the MaterialPageRoute is constructed as follows:

    // Dynamic routing
    Navigator.of(context).push(
      new MaterialPageRoute(
        builder: (BuildContext context) {
          return new TestAPage();
        },
      ),
    ).then((value) {
      // Get the data from the previous page
    });
Copy the code

When you use GetX, you can write like this

    Get.to(new TestAPage());
Copy the code

Of course, if you need to get the postback parameters of the page TestAPage, you can do this

  //Gex gets data dynamically
  void fun5(a) async {
    // get the return value of page A
    var value = await Get.to(new TestAPage());
    print("A page return value $value");
  }

Copy the code

After seeing such code, what would you use??

Static routing

By default, the Navigator opens the page using a static route. First you need to configure routing rules in routes in the MaterialApp entry, as configured here

class RootApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // Use GetX first step
    return GetMaterialApp(
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      // Static path
      routes: {
        "/testa": (context) => TestAPage(),
      },
      // The default home page is displayedhome: MyHomePage(), ); }}Copy the code

Then use the Navigator mode code as follows

Navigator.of(context).pushNamed("/testa");
Copy the code

Use the GetX code as follows

Get.toNamed("/tefun4");
Copy the code

Replace the current page

Using Navigator

Navigator.of(context).pushReplacement(
      new MaterialPageRoute(
        builder: (BuildContext context) {
          return newTestAPage(); },),);Copy the code

Use GetX

Get.off(new TestAPage());
Copy the code

Open a new page Close all previous pages

In this application scenario, if you need to log in to the APP, close all the pages and open the login page when you log out.

The Navigator way

Navigator.of(context).pushAndRemoveUntil(
      new MaterialPageRoute(
        builder: (BuildContext context) {
          return new TestAPage();
        },
      ),
          (Route route) => false,);Copy the code

GetX way

Get.offAll(new TestAPage());
Copy the code

The completion of

Not limited to thinking, not limited to language restrictions, is the highest realm of programming.

With xiaobian character, must be to record a set of video, and then upload

Interested you can pay attention to the public account (Biglead) my big front-end career to get the latest information to learn