State management in Flutter - the use of GetX plug-ins

GetX is a responsive state management framework based on the idea of ​​ReactiveX. Compared with BLoC, it has the following advantages:

  • Compared with BLoC, GetX has a simpler project structure and fewer files to maintain;
  • BLoC cannot achieve true cross-page data state management (global BLoC can be partially implemented, but it is more troublesome to maintain);
  • Internal routing management is realized, which is easy to use;

Use of GetX plugin

1) Introduce the getX library in pubspec.yaml and execute flutter pub get;

2) Search for getX in Android Studio → Prefrences → Plugins, select and download the plugin;

3) After the plug-in is downloaded, create a new → flutter bloc under the lib path in the project, and the plug-in will automatically generate template code;

Enter the Module Name and click OK to automatically generate the following files

The default code generated by the logic layer

The default code generated by the state layer

The default code generated by the view layer

Under the GetX paradigm, the state manager is no longer passed through the context, but obtained through put/find;

main.dart transformation: replace the original MaterialApp with GetMaterialApp, so that the App can have the characteristics of GetX, and the internal parameters of GetMaterialApp are the same as those of MaterialApp;

Writing logic under GetX paradigm

Requirement: Click the button in the lower right corner of the page, every time you click, the actual number in the middle of the page will be +1;

1) UI basic layout

2) Declare the variables that need to manage the state in the state and initialize them

3) Write the corresponding counting logic in logic, and you need to manually call the built-in function update() after the state is modified

4) Go back to the view, call the method in the logic in the click event of the button, and wrap the components that need to monitor the state with GetBuilder

The above completes the writing of business logic components under the GetX paradigm;

GetX also provides Easy mode. In Easy mode, the original logic and state are combined, and the overall structure is logic-view. The variables that need to manage the state and the corresponding logic are written in logic, which can be used for simple data interaction pages;

Compilation of GetX responsive logic

GetX also provides a responsive programming paradigm. Under the responsive paradigm, compared with the standard GetX paradigm, we only need to make a small amount of modification;

1) state: Use Rx... to define the type of variable that needs state management. When initializing the variable, add the .obs suffix

2) logic: Just write the logic of the state change (here, increase the count) directly, without calling update()

3) view: Change the components that need to monitor the status to Obx package

The above completes the logic writing of the responsive paradigm under GetX;

Comparison between GetX standard paradigm and responsive format:

  1. The standard paradigm is imperative programming, which needs to manually call the built-in function update(); the reactive style is used with Rx... variables, and does not need to manually call other functions;
  2. Each responsive variable must create a GetStream. If there are many variables or long data scenarios, the memory consumption will be large;
  3. The standard paradigm uses GetBuilder to package components, and GetBuilder is essentially a Widget with minimal impact on memory;

In summary, I personally recommend using the standard paradigm;

GetX cross-page interaction

Compared with BLoC, GetX provides the ability to transfer data across pages conveniently. We first create two modules, get_demo_one and get_demo_two;

Requirements: Page one supports jumping to page two, and transfers data to page two. Page two implements the function of counting clicks. When exiting the page, the count is synchronized to page one;

1) Write get_demo_one_state, declare and initialize variables that need state management

2) Write get_demo_one_logic, add the logic of counting and page jumping, Get.to... is the routing management function in GetX, which will be mentioned below

3) Write the basic UI layout of get_demo_one_view

4) Write get_demo_two_state, declare and initialize variables that require state management

5) Write get_demo_two_logic, add count and get the logic of the data passed by Page One

6) Write the basic UI layout of get_demo_two_view, and obtain the latest initialized GetDemoOneLogic instance through the Get.find() function

The above completes the logic of data transfer between multiple pages under the GetX paradigm;

GetX routing management

simple routing

Simple routing is to jump to the page directly through Get.to(SomePage()). In the above example, PageOne jumps to PageTwo using simple routing;

named route

  • Manage all pages with unified configuration
  • Jump to the page by url

1) Write the configuration file RouteConfig.dart

2) Configure the main entry. The home parameter should be deleted here, because home and initialRoute will be initialized at the same time, and should not be set at the same time. Only initialRoute is reserved here;

3) Use routing

4) Exit page: no matter using simple route or named route, the Get.back() function is used to exit the current page;

GetX resource release

When using GetX for routing management, there may be a problem that resources are not released;

Scenarios where resources are not released:

  • Use the GetX paradigm to build the project, but use the Navigator.push()/Navigator.pop() method for routing management;

Reason analysis of resources not being released:

  • GetxController has its own memory management mechanism, which will be triggered by methods such as Get.to()/Get.toName()/Get.back();
  • It can be understood that when Get.to ()/Get.toName() is called, GetX will store the GetxController (logic) created inside the navigation page, and then when Get.back() is called, the stored GetxController (logic) will be stored. logic) released;
  • Therefore, if Navigator.push()/Navigator.pop() is used for routing management, GetX cannot capture the current GetxController (logic), and naturally cannot release the corresponding GetxController (logic) when the page is destroyed;

solution:

Manually make GetX aware of routing, and rewrite the behavior of the page after sensing push/pop;

  • The reportCurrentRoute() method is to hand over the incoming route to GetX for management, and then the GetxController in the route can be managed through GetX;
  • The reportRouteDispose() method is to release the incoming route through GetX;
  • Based on the above modification, even if Navigator.push()/Navigator.pop() is used for routing management pages, it can still be obtained by GetX to GetxController to complete resource release;

at last

If you want to become an architect or want to break through the 20-30K salary range, then don't be limited to coding and business, but you must be able to select models, expand, and improve programming thinking. In addition, a good career plan is also very important, and the habit of learning is very important, but the most important thing is to be able to persevere. Any plan that cannot be implemented consistently is empty talk.

If you have no direction, here I would like to share with you a set of "Advanced Notes on the Eight Major Modules of Android" written by the senior architect of Ali, to help you organize the messy, scattered and fragmented knowledge systematically, so that you can systematically and efficiently Master the various knowledge points of Android development.
insert image description here
Compared with the fragmented content we usually read, the knowledge points of this note are more systematic, easier to understand and remember, and are arranged strictly according to the knowledge system.

Full set of video materials:

1. Interview collection

insert image description here
2. Source code analysis collection
insert image description here

3. The collection of open source frameworks
insert image description here
welcomes everyone to support with one click and three links. If you need the information in the article, directly scan the CSDN official certification WeChat card at the end of the article to get it for free↓↓↓

Guess you like

Origin blog.csdn.net/weixin_43440181/article/details/130350389