Efficient learning model

• What — — > according to — > how model
• What is? –> Why? –> How to use? –> Realization principle –> Summary and share (Learn to apply)

One. What is GetX?

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

• GetX has three basic principles:

  • Performance: GetX focuses on performance and minimal resource consumption. GetX’s packaged APK footprint and runtime memory footprint are comparable to other state management plug-ins. If you’re interested, here’s a performance test.
  • Efficiency: GetX’s syntax is very simple and maintains extremely high performance, which can greatly reduce your development time.
  • Structure: GetX completely decouples the interface, logic, dependencies, and routing, making it cleaner to use, clearer to logic, and easier to maintain code.

• GetX is not bloated, but lightweight. If you only use state management, only the state management module will be compiled and nothing else will be compiled into your code. It has a lot of functionality, but it’s all in a separate container that only starts after use.

• Getx has a huge ecosystem that runs with the same code on Android, iOS, the Web, Mac, Linux, Windows, and your server. Get Server allows you to fully reuse your front-end code on your back end.

Why use GetX?

1. Many times a lot of packages will break after the Flutter update. Compilation errors sometimes occur, errors often occur, and there are still no answers. Developers need to know the source of the error, track the error, and then try to open a problem in the appropriate repository and see its resolution. GetX centralizes the main resources for development (status, dependencies, and route management), allowing you to add a package to PubSpec and get to work. After the Flutter update, the only thing you need to do is update the Get dependencies and start working. Get can also address compatibility issues. How many times is one package version incompatible with another package version because one package uses dependencies in one version and another package uses dependencies in another version? You don’t have to worry about this with Get because everything is in the same package and is completely compatible.

2. Flutter is simple, Flutter is magical, but Flutter still has some code that is probably unnecessary for most developers, such as navigator.of (context).push (context, Builder […] You wrote 8 lines of code just to call a route. With Get, just get.to (Home()) is done and you go to the next page. Dynamic web urls are currently a pain in Flutter, while GetX is very simple. Managing state and dependencies in Flutter also generates a lot of discussion, as there are hundreds of modes in PUB. But there’s nothing simpler than adding a “.obs “to the end of your variable, putting your widget inside an Obx, and all updates to the variable are automatically updated on the page.

3. Easy, no worries about performance. Flutter performance has been very impressive, but imagine that you are using a state management, and distribution of a locator to your blocs/stores/controllers/etc. When you don’t need that dependency, you must manually invoke it to exclude it. But, have you ever thought about simply using your controller, and when it’s no longer being used by anyone, it will simply be deleted from memory? That’s what GetX does. With SmartManagement, everything that isn’t being used is removed from memory, and you shouldn’t worry about anything except programming. GetX will ensure that you consume the minimum necessary resources without even creating a logic to do so.

4. Actual decoupling. You’ve probably heard of the concept of “separating the interface from the business logic.” This is not the exception to BLoC, MVC, MVVM, other standards on the market have this concept. However, this concept can often be mitigated with Flutter because of the use of context. If you need context to find an InheritedWidget, you need to find it in the interface, or pass the context by parameter. I find this solution particularly ugly, because to work in a team, we often rely on the business logic of the View. Getx deviates from the standard approach, and while it doesn’t completely ban StatefulWidgets, InitState, and so on, it always has a similar approach that can be cleaner. Controllers have a life cycle, so when you need to make APIREST requests, for example, you don’t depend on anything in the interface. You can use onInit to initiate the HTTP call, and the variables will be populated when the data arrives. Because GetX is fully responsive (really, working under the current), once the project is populated, all widgets that use this variable are automatically updated in the interface. This allows someone with UI expertise to handle widgets and not send anything to the business logic other than user events (such as button clicks), while the person handling the business logic will be free to create and test the business logic alone.

The library is constantly updated and implementing new features. According to the comparative analysis of the popular Flutter state management plug-in, the analysis results are as follows:

1. Compare parameters horizontally

In horizontal analysis and comparison, the number of Likes, Popularity, and pub Points, as well as the number of stars and contributors of Gitbub, were integrated. The parameters are described as follows:

• The number of Likes reflects the degree of the Flutter developers’ Likes, which indirectly reflects the document integrity, readability and ease of use of the Flutter.

• Popularity: Reflects the Popularity of Flutter developers and the Popularity of Flutter applications. (The more people who use Flutter, the more people who will step in 💣)

• Pub Points: The Pub score is 130 out of 100, which is a fairly basic comprehensive evaluation of plug-ins, divided into the following six parts:

  • Follow the plug-in specification (20 points)
  • Document integrity (20 points)
  • Cross-platform support (20 points)
  • By static analysis (30 points)
  • Version compatibility (20 points)
  • Support for NULL Safety (20 points)

• GitHub Star number: This is known to reflect the degree of recognition by developers, a symbol of strength!

• Number of contributors: This is the community appeal of the plugin and the number of people who participate in maintenance. The more contributors, the higher the reliability of the plugin, and not slow updates or sudden maintenance interruptions (such as 💣💣💣).

In order to unify the comparison scale, we made a unified comparison with the maximum value of the same dimension of the management plug-in listed in this paper, and obtained the stars according to the ratio. A total of 5 stars were set, and the corresponding relationship between the ratio and the stars is as follows:

• 0.9-1.0:5 stars
• 0.8-0.9:4 stars
• 0.6-0.8:3 stars
• 0.3-0.6:2 stars
• Below 0.3:1 star

2. Comparative analysis of excellent status management plug-ins in the industry

GetX:

Provider:

BloC:

Fish Redux:

The star rating of each parameter is as follows:

The plug-in name number | | like popularity score (%) | | | contributors number Star

GetX | u u u u u | u u u u u | u u u u u painted painted painted painted painted | | u u u

Painted painted painted painted painted the Provider | | u u u u | u u u u u painted painted painted painted painted | |

Painted painted painted painted painted painted BLoC | | | u u u u u | u u u u u | u u u u u

Fish story painted painted painted painted painted painted painted | | | painted painted painted painted painted painted painted u | |

list

Based on the above star rating and data, sum up the ratio of each data, sort from large size, and get the score and ranking as follows:

Plug-in name comprehensive score ranked | | | | stars

GetX | 1 | | 4.54 u u u u u

BLoC | 2 | | 4.14 u u u u

The Provider | 3 | | 3.74 u u u u

Fish story | | | 2.86 4 u u u

3. Three advantages

State management

Flutter currently has several state managers. However, most of them involve using ChangeNotifier to update widgets, which is a poor way to perform for medium – and large-sized applications. As you can see from the official Documentation for Flutter, ChangeNotifier should use 1 or 2 listeners at most, making them virtually unusable for any medium or large application.

Get is not better or worse than any other state manager, but rather you should analyze these points and the ones below to choose whether to use Get alone or in combination with other state managers.

Get is not the enemy of other state managers because Get is a microframework, not just a state manager, and can be used either alone or in combination with other state managers.

Get has two different state managers: the simple state Manager (GetBuilder) and the responsive state Manager (GetX).

Reactive state manager

Reactive programming may seem strange to many people because it is complex, but GetX makes reactive programming very simple.

• You don’t need to create StreamControllers.
• You don’t need to create a StreamBuilder for each variable.
• You don’t need to create a class for each state.
• You don’t need to create a GET for an initial value.

Reactive programming with Get is as easy as using setState.

Let’s imagine that you have a name variable and want all the widgets that use it to refresh automatically every time you change it.

That’s your count variable.

var name = 'Jonatas Borges';
Copy the code

To make it observable, you just add “.obs” to the end.

var name = 'Jonatas Borges'.obs;
Copy the code

In the UI, when you want to display the value and update the page when the value changes, you just do that.

Obx(() => Text("${controller.name}"));
Copy the code

That’s all. It’s as simple as that.

More details on state management

See here for a more in-depth explanation of state management. You’ll see more examples there, and the difference between a simple state manager and a reactive state manager.

Routing management

If you want to avoid the context (context) using routing/snackbars/dialogs/bottomsheets, GetX also is very good for you, come on display:

Add “Get” to the front of your MaterialApp to make it GetMaterialApp.

GetMaterialApp( // Before: MaterialApp(
  home: MyHome(),
)
Copy the code

Navigate to a new page

Get.to(NextScreen());
Copy the code

Navigate to a new page with an alias. See more details on named routing here

Get.toNamed('/details');
Copy the code

To close Snackbars, dialogs, Bottomsheets or anything else you would normally close with navigator.pop (context).

Get.back();
Copy the code

Go to the next page with no option to return to the previous page (for splash screen, login page, etc.).

Get.off(NextScreen());
Copy the code

Go to the next page and cancel all previous routes (useful in shopping carts, polls, and tests).

Get.offAll(NextScreen());
Copy the code

Notice that you don’t need to use context to do these things? This is one of the biggest advantages of using Get for route management. With it, you can execute all these methods in your controller class without worrying about where the context is.

More details on route management

Controller controller = Get.put(Controller()); // Instead of Controller Controller = Controller();Copy the code

controller.fetchApi();
Copy the code

Controller controller = Get.find(); // Yes, it looks like magic, Get will find your controller and provide it to you. You can instantiate a million controllers, Get will always give you the right controller.Copy the code

Text(controller.textFromApi);
Copy the code

More details on dependency management

See here for a more in-depth explanation of dependency management.