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.

Recommended for Flutter is a lightweight and powerful plugin for GetX for route management

GetX provides state management, route management, dependency management, and many more utilities such as internationalization, themes, etc. Today we will look at GetX state management.

For the status manager, There is a ChangeNotifier that can be used to notify widgets. However, it is not advisable to use too many listeners. The official document suggests a maximum of 2 listeners.

Reactive state manager

Reactive programming is used in many frameworks, such as vue.js. The GetX plugin for Flutter makes it easy to program reactive programming. Let’s look at the counter demo.

Integration plug-in

Before you can use GetX, you need to integrate it into your project and add it to your pubspec.yaml file.

dependencies:
  get:
Copy the code

And then import where you need to use it

import 'package:get/get.dart';
Copy the code
Counter for GetX
  • Add “Get” to the front of your MaterialApp to change it to GetMaterialApp, because you need to use route management of GetX, so do this step.
void main() {
  runApp(
    GetMaterialApp(
      home: HomePage(), 
    ),
  );
}
Copy the code
  • Create Controller as a business logic class
class Controller extends GetxController {
  var count = 0.obs;
  increment() => count++;
}

Copy the code

Note the 0. Obs above and use the simple. Obs to make any variable observable.

  • Create counter page

Instantiate the business class using get.put ()

final Controller c = Get.put(Controller());
Copy the code

We display the value of the counter in the page navigation.

AppBar(// uses Obx(()=> updates Text every time the count changes. Title: Obx (() = > Text (' Click: ${Arthur c. mount} ')), elevation: 0.0),Copy the code

Button triggers increment method, count+1 each time

floatingActionButton: FloatingActionButton(
    child: Icon(Icons.add),
    onPressed: c.increment,
),
Copy the code

The navigation title number will be updated every time the button is clicked. A detailed demo is available in the getx folder of the project, and the demo address is at the end of the article.

  • Multiple pages update display counters synchronously and only need to be used on separate pagesfinal Controller c = Get.find();Find a Controler that is being used by another page. Also in the UI, if you want to display the Controler value and update it automatically, use
Obx(() => Text("${c.count}"));
Copy the code

In this way, if count is changed in another page, any widgets that are observed and displayed on the stack will be updated to display the latest results.

The next article will cover internationalization of GetX. More on GetX will be posted later. The Demo address is github.com/Qson8/flutt… Welcome to the public account: Hi Flutter