List of Open Source State Management Plugins for Flutter

wedge

It is said that Kong Yiji changed his career to become a programmer. He heard that the big front-end has become popular in recent years, and he has also followed the trend for a while. Know a little about Vue, React, Angular. During this time, the industry giant Google released a Flutter, claiming to need a set of code to handle the entire front-end, Kong Yiji was naturally unwilling to let it go.

On this day, Kong Yiji visited the Nuggets community. There were too many bigwigs in it. He was afraid that he would be too amateur to reveal his secrets. Knowing that I couldn’t talk to them, I had to talk to beginners. Once asked in my comment section, “Have you learned Flutter?” I returned a slight expression. He said, “Study, … I will take the test for you. How is the state management of Flutter written?” I thought, are people of the same level as me worthy of the test? There was no reply, no further notice. After waiting for a long time, Kong Yiji commented again, “Can’t write it?…I teach you, remember! Flutter state management should be written like this. When you are a senior engineer in the future, you will use it for architecture.” I thought to myself It is still far from the level of senior engineers, and our director never uses Flutter to develop applications; he is funny and impatient, and he replied lazily, “Who wants you to teach, isn’t it just using a setState method?” Kong Yiji looked extremely happy, sent a triumphant emoji, nodded and said, “Yes, yes! … There are N ways to write state management, you know?” Of course I didn’t answer, but he himself really are listed.

Provider

One of the most popular state management plugins on Pub, it has been loved by many Flutter developers for its simplicity, ease of use, and high performance, and has become the first official state management tool recommended. Plugin pub address: Provider package . In essence, Provider is a package based on InheritedWidget . Using Provider has the following characteristics:

• Simplified allocation and destruction of resources;

• lazy loading;

• Reduced the work of creating a lot of code related to state management;

• A common way to consume data shared by InheritedWidget;

• Provides high scalability for listening links with significantly increased complexity.

setState

The most basic and simplest state management method. The official Hello World example uses this method. The advantage is simplicity, but the disadvantage is that the advantages of other state management are its disadvantages. Those are all for this method. Disadvantages improved. Of course, it is not impossible to use. If it is only for the case of no subcomponents or very few subcomponents, there is no problem with using setState.

InheritedWidget and InheritedModel

The ModelBinding introduced earlier is this way, and the Provider is actually this way. Encapsulate InheritedWidget to realize data transfer on the component tree, and then achieve the purpose of state data sharing and partial refresh.

Redux

React -like state management tool Redux is essentially a state container, pub address: Flutter-Redux package . The key is to provide 3 kinds of Widget :

• StoreProvider : Basic Widget , which will pass the specified Redux state data ( Redux Store ) to the required subordinate components;

• StoreBuilder : A subordinate component that gets state from StoreProvider , and it will pass the obtained state to a builder method that returns Widget .

• StoreConnector : A subordinate component that gets the state from the nearest StoreProvider ancestor component, and then uses the specified converter to convert the state to a ViewModel object and then give it to the builder method. Any time the state emits a change event, the component is automatically rebuilt, eliminating the need to actively manage event subscriptions.

Fish Redux

A Redux-based overall application framework produced by Xianyu is suitable for building large and medium-sized applications, pub address: Fish-Redux package . The difference from Redux is that Fish Redux is an application framework that solves problems such as application divide and conquer, communication, data-driven, and decoupling. As an application framework, the advantage is that it can establish a unified set of specifications for the team. Of course, there are also disadvantages. For example, it may be too large for small applications and lack flexibility, which may affect the efficiency of valve opening and development.

BLoC/Rx

A series based on the Stream / Observable paradigm. For an introduction, see the official documentation: Flutter BLoC .

GetIt

GetIt is actually a service management tool based on state management, the advantage is that it does not require BuildContext. It is very suitable if you want to use dependency injection and interface-oriented programming to achieve code decoupling and application management. The corresponding pub packages and documents are as follows:

MobX

A state management library based on observer pattern and reactive pattern, GitHub address: MobX . The goal of MobX is to connect an application’s interface with responsive data. This way is completely automatic and feels natural (similar to two-way binding). For developers, they only need to focus on the responsive data that the interface needs to consume, without worrying about keeping the two in sync.

Flutter Commands

Based on ValueNotifier, a reactive state management library implemented using the command pattern. Best practice is to combine with GetIt, you can also use Provider or other containers. pub address: Flutter Command .

Binder

The state management package based on InheritedWidget is modeled after recoil. The goal is to separate and decouple business, state and interface. pub address: Binder package .

GetX

A simplified state management solution, pub address: GetX package . GetX is an ultra-lightweight yet powerful Flutter solution that provides high-performance state management, intelligent dependency injection, and fast-available routing management tools. Because GetX simplifies a lot of implementation code, the current popularity has surpassed Provider.

States Rebuilder

States Rebuilder is a high-performance, expected and controllable state management tool. Supports mutable and immutable states, implements strict state control, and supports automatic state clearing. And you can also use setState ( setState of the state data model class) in StatelessWidget to update the interface, and also support page navigation and message prompts without BuildContext. GitHub address: States Rebuilder .

end

After Kong Yiji finished writing, I was a little surprised. Could he know all this? But because of face, I was embarrassed to ask him. I had to search for it myself according to what he wrote. As for whether he can, there is no way to know!

Summarize

Since Dart language and Javascript have a lot in common, there are many Javascript-like libraries on pub, such as Redux, MobX, etc. In fact, there is no best state management tool, only the most suitable state management tool. How to choose can refer to the following points:

• Timeliness of update and maintenance : Flutter itself has a fast iteration speed, so if some plug-ins are not maintained in time, all your code needs to be changed in the future, especially plug-ins such as state management that involve the entire application architecture.

• The number of users : You can evaluate the user’s situation through the score of pub and the score of Github. The small number of users means that you may need to step on the pits and mine mines by yourself. It doesn’t matter if you play by yourself, but it may affect the entire product development. Product development progress.

• Team adaptability : If you are developing alone, you can ignore this, but if there are multiple people in the team, you need to consider a plugin that everyone can quickly get started with.

• Native dependency : Many plugins need to rely on native ones, and some native ones are third-party open source code. If these open source codes stop being maintained, it is likely that Flutter’s plugins cannot be updated. Therefore, unless it is an official plug-in, special care should be taken for third-party plug-ins. If a third-party plug-in depends on native or even third-party open source code, then you need to pay attention to choose carefully. If possible, choose pure Dart plugins as much as possible.

The text and pictures in this article are from InfoQ