GetX is a lightweight and powerful solution for Flutter: high-performance state management, intelligent dependency injection, and convenient route management.

GetX official low function, high performance, low coupling as the basic principles, in a lightweight way, to provide developers with many features.

GetX provides state management, route management, dependency management, and more utilities such as internationalization, themes, and so on. Today we’ll take a look at GetX’s route management.

In the past, routing management could not bypass the context, such as

Navigator.pushNamed(context, '/login', arguments: arguments);
Copy the code

or

Navigator.pop(context)
Copy the code

Both require a Context context, both encapsulated and passed in from the Widget Builder. Let’s take a look at how convenient the getX route is.

GetX rely on

With getX, you first import the dependency library, which pubspec.yaml joins and pulls the dependency locally.

The get: ^ 3.25.0Copy the code

Then introduce the header file where it is used

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

GetX Route management

General routing navigation
  • Add “Get” to the front of your MaterialApp to make it GetMaterialApp.
void main() {
  runApp(
    GetMaterialApp(
      home: HomePage(), 
    ),
  );
}
Copy the code
  • Navigate to a new page
Get.to(LoginPage());
Copy the code
  • Pop returns, close snackbars, dialogs, bottomsheets
Get.back();
Copy the code
  • Push to the next page, but do not return from the next page
Get.off(LoginPage());
Copy the code

It can be used on the startup screen or login page.

  • Push to the next page and remove all previous routes from the stack
Get.offAll(LoginPage());
Copy the code

The biggest advantage of GetX in routing management is that it increases the scope of routing management, and increases the flexibility of your code. You don’t have to worry about where the context is, but use the Builder specifically.

Of course, routing management can also use alias navigation here.

Alias routing navigation

If you’re comfortable using aliases for route navigation, GetX also supports this

  • To navigate using an alias route, define the route, use GetMaterialApp in the main function, and set the related properties.
Void main() {// Alias route configuration runApp(GetMaterialApp(initialRoute: '/', getPages: [GetPage(name: '/', Page: () => OnePage()), GetPage( name: '/two', page: () => TwoPage(), transition: Transition.zoom), ], ), ); }Copy the code

GetMaterialApp also has an attribute unknownRoute, which allows you to set navigation for undefined routes, such as error pages.

unknownRoute: GetPage(name: '/notfound', page: () => UnknownRoutePage()),
Copy the code
  • Push to the next page
Get.toNamed("/two");
Copy the code
  • Push next page and remove previous page.
Get.offNamed("/two");
Copy the code
  • Push the next page and remove all previous pages
Get.offAllNamed("/two");
Copy the code
  • Push carries data

Just add the data you want to pass

Get.toNamed("/two", arguments: 'www.qson.tech');
Copy the code

Get the data by calling get.arguments on your page alias two.

The next article will cover GetX’s responsive state manager. More on GetX will be posted at github.com/Qson8/flutt…

Welcome to the public account: Hi Flutter