preface

GetX provides two ways for state management, one is a simple way, using GetBuilder form implementation, the other is responsive state management. The simple way is very lightweight and simple, and does not require the use of ChangeNotifier. For starters, getting to know GetX’s state management in this way is easier to get started with, and it’s OK even for large applications. This article explains the simple state management of GetX using a simple counter

State class

The state class is called Controller in GetX and inherits from GetxController. When the state changes, call the Update method to notify the state-dependent components to refresh. With the GetX Snippets plug-in installed in VSCode, we can quickly enter the status template code using the getcontroller directive. Our simplest counter status code looks like this:

class CounterController extends GetxController {
  int _counter = 0;

  get counter => _counter;

  voidincrement() { _counter++; update(); }}Copy the code

View the interface

The interface layer uses GetBuilder wraps where it needs to use state, and then you can use Controller to access state objects and manipulate state methods. GetBuilder only needs two parameters:

  • init: Initializes the state object. This is where the state object can be initialized.
  • builderMethod: This method is used to build a tree of state-dependent components. Methods carry state object parameters so that the following components can access the state object. And once the state object passesupdateWhen a method notifies you of an update, components that depend on the status object are flushed.

The build code for the counter view interface is shown below, and you can see that the entire use is very simple.

Widget build(BuildContext context) {
  return GetBuilder<CounterController>(
    init: CounterController(),
    builder: (controller) => Scaffold(
      appBar: AppBar(
        title: Text('GetX counter '),
      ),
      body: Center(
        child: Text(
          '${controller.counter}',
          style: TextStyle(
            color: Colors.blue,
            fontSize: 24.0, ), ), ), floatingActionButton: FloatingActionButton( child: Icon(Icons.add), onPressed: () { controller.increment(); },),),); }Copy the code

Further optimization

The disadvantage of this approach is that GetBuilder wraps the whole Scaffold, which can cause performance problems if the Scaffold has a large component tree. We should only wrap components that depend on state objects. But for this example, FloatingActionButton and Text are not in the same hierarchy, and GetX provides a way to share state in this case. Just implement a static get.find () alias method in the status class.

static CounterController get to => Get.find();
Copy the code

With this method, the state object can be accessed anywhere using CounterController.to as long as it is registered once. Now, our modified counter interface code minimizes the dependency on state objects.

Widget build(BuildContext context) {
return Scaffold(
  appBar: AppBar(
    title: Text('GetX counter '),
  ),
  body: Center(
    child: GetBuilder<CounterController>(
      init: CounterController(),
      builder: (_) => Text(
        '${CounterController.to.counter}',
        style: TextStyle(
          color: Colors.blue,
          fontSize: 24.0, ), ), ), ), floatingActionButton: FloatingActionButton( child: Icon(Icons.add), onPressed: () { CounterController.to.increment(); },),);Copy the code

conclusion

This article introduces GetX’s simple state management GetBuilder and state class construction. This way, with the help of the GetX Snippets plug-in, there is not much coding, which is a sign of GetX’s productivity. Get GetX?) . We also showed you how to share state and minimize GetBuilder’s scope to reduce unnecessary component refreshes and improve performance. In the next article we’ll look at this approach in combination with network requests and see how status updates can be done when there are network requests (asynchronous operations).

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!