preface

After several chapters on simple state response management for GetX, this article begins with reactive state management for GetX. In terms of reactive state management, the GetX official documentation mentions the following advantages:

  • No need to create a StreamController;
  • No need to create a StreamBuilder for every variable;
  • There is no need to create a class for each state;
  • There is no need to create a GET method for an initial value;
  • Reactive programming with GetX is as simple as using setState.

There’s no tax on bragging, but we’ll have to run through a few examples to find out if GetX is really that good.

Monitoring of the variable

GetX monitor variables are very simple, just assume.obs when defining, for example:

var name = 'Island code farmer'.obs;
Copy the code

How does that work? A Stream is created for the String object in GetX, given an initial value, and all widgets that use that object are notified. These components are flushed whenever the value of this object changes. This is done through the Obx component. Here is a simple example.

class SimpleReactiveController extends GetxController {
  final _name = 'Island code farmer'.obs;
  set name(value) => this._name.value = value;
  get name => this._name.value;
}

class SimpleReactivePage extends StatelessWidget {
  SimpleReactivePage({Key? key}) : super(key: key);
  final SimpleReactiveController simpleController = SimpleReactiveController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Responsive state Management'),
      ),
      body: Center(
        child: Obx(
          () => Text('${simpleController.name}'),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.refresh),
        onPressed: () {
          simpleController.name = 'island-coder'; },),); }}Copy the code

In contrast to setState, GetX’s extended.obs usage does internal equality comparisons. If the objects before and after the update operation are equal, the component is not notified to refresh, thus improving performance. When a Controller has multiple objects, when those objects change, only the components that depend on those objects will be updated, not all components that depend on the Controller.

A method to declare a status object

In GetX’s reactive state management, there are three ways to declare state variables, which are collectively called Rx variables in GetX.

Rx{Type}

That is, the Rx prefix is assumed in the base type, and the initial value can be set, but it is recommended to give the object an initial value (for the NULL safety version, an initial value must be provided).

final name = RxString(' ');
final isLogged = RxBool(false);
final count = RxInt(0);
final balance = RxDouble(0.0);
final items = RxList<String> ([]);final myMap = RxMap<String.int> ({});Copy the code

Method two: Rx generics

The scope of using generics is much wider, and any class can be converted to Rx variables, including custom types.

final name = Rx<String> (' ');
final isLogged = Rx<Bool>(false);
final count = Rx<Int>(0);
final balance = Rx<Double>(0.0);
final number = Rx<Num>(0);
final items = Rx<List<String> > ([]);final myMap = Rx<Map<String.int> > ({});// Custom class
final user = Rx<User>();
Copy the code

Method 3:. Obs extension

Using the. Obs extension is more useful and concise. For objects that need to be monitored, add the. Obs extension.

final name = ' '.obs;
final isLogged = false.obs;
final count = 0.obs;
final balance = 0.0.obs;
final number = 0.obs;
final items = <String>[].obs;
final myMap = <String.int>{}.obs;

// Custom class
final user = User().obs;
Copy the code

Use Rx variables in the view

There are two ways to use Rx variables in a view, either using the Obx component as described above, or using the GetX component as shown below:

/ / way
Obx(() => Text('${simpleController.name}'),),

2 / / way
GetX<SimpleReactiveController>(
  builder: (controller) => Text('${simpleController.name}'),
  init: simpleController,
),
Copy the code

conclusion

This article introduces the basic concepts and uses of GetX for reactive state management. There are many more advanced uses of reactive state than the simple GetBuilder approach, which will be covered in the following chapters.

I am dao Code Farmer with the same name as my wechat official account. This is a column about the introduction and practice of Flutter, providing systematic learning articles about Flutter. See the corresponding source code here: The source code of Flutter Introduction and Practical column. If you have any questions, please add me to the wechat account: island-coder.

👍🏻 : feel the harvest please point a praise to encourage!

🌟 : Collect articles, easy to look back!

💬 : Comment exchange, mutual progress!