This is the ninth day of my participation in the August More text Challenge. For details, see: August More Text Challenge

wedge

Say kong Yiji changed line to do programmer, hear in recent years big front end compares fire, also followed the wind to learn a while. Vue, React, Angular. Around this time, the industry giant Google came up with Flutter, claiming that it wanted a code to fix the entire front end, and Kong was reluctant to let go.

This day Kong Yiji stroll to the community of gold, inside big guy too much, he is afraid he is too amateur. Knowing not to talk to them, I had to talk to beginners. One time I asked in my comment section, “Did you learn Flutter?” I gave a brief expression. “Yes,” he said. I’ll give you a test. Status management of Flutter, how is it written?” I thought, the level and I the same person, also deserve to test me? He did not reply to his message and gave it up. Kong Yiji waited for a long time and commented again, “Can’t you? … I’ll teach you. Remember! The Flutter state management should be written like this. When I am a senior engineer in the future, I will use it to do architecture.” I thought I was a long way from being a senior engineer, and our director never used The Flutter to develop an app; Funny, impatient, lazy answer him, “who wants you to teach, is not to use a setState method?” Kong Yiji looked very happy, gave a triumphant expression, nodded and said, “Yes, yes! … There are N ways to write state management, you know?” I didn’t answer, of course, but he did list it himself.

Provider

One of the most popular status management plug-ins on the Pub, many Flutter developers love it for its simplicity, ease of use, and high performance, and it is the top official recommended status management tool. We’ve already covered state management in Our Introduction to Flutter and Combat (40) : Shopping Cart as an example. Plugin PUB address: Provider package. A Provider is essentially an encapsulation of an InheritedWidget. Using a Provider has the following features:

  • Streamlining the allocation and destruction of resources;
  • Lazy loading;
  • Reduced the amount of code needed to create state-management-related classes;
  • A generic way to consume the data shared by inheritedWidgets;
  • It provides high scalability for listening links with significantly increased complexity.

setState

The official Hello World example uses this form of state management in its most rudimentary form. The advantages are simplicity, but the disadvantages are – take the advantages of other forms of state management, which are all improvements to this form of state management.

InheritedWidget and InheritedModel

This is how the Previously introduced ModelBinding works, and it is also how providers work. Encapsulate InheritedWidget to pass data in the component tree so that status data can be shared and locally refreshed.

Redux

Redux, a status-management tool similar to React, is essentially a status-container, pub address: Flux-Redux package. The key is to provide three widgets:

  • StoreProviderBasis:Widget, which takes the specified Redux state data (Redux Store) to the required sub-components;
  • StoreBuilder: one fromStoreProviderA child component that gets the state and passes the obtained state to a returnWidget ็š„ builderMethods.
  • StoreConnector: a sub-component that gets state from the nearest StoreProvider ancestor component and then uses the specifiedconverterConvert the state toViewModelObject to thebuilderMethods. Any time the state emits a change event, the component is automatically rebuilt, eliminating the need to actively manage event subscriptions.

Fish Redux

Xianyu produced a redux-based overall application framework, for the construction of large and medium-sized applications is very suitable, pub address: Fish-Redux Package. Unlike Redux, Fish Redux is an application framework that addresses issues such as application divide and conquer, communication, data drive, and decoupling. As an application framework, the advantage is that it can establish a set of unified specifications for the team. Of course, there are disadvantages, such as too large for small applications, lack of flexibility, may affect the valve opening efficiency.

BLoC / Rx

An introduction to a series based on the Stream/Observable paradigm can be found in the official document, Flutter BLoC.

GetIt

GetIt is actually a service management tool based on state management, with the advantage that BuildContext is not required. If you want to use dependency injection, interface-oriented programming for code decoupling and application management, this is a good fit. The corresponding PUB packages and documents are as follows:

  • GetIt Package: Basic service management tool that provides a container to help code find the corresponding service provider object.
  • GetIt Mixin: An extension of GetIt that makes GetIt fully applicable to state management.
  • GetIt Hooks: Another extension to GetIt that can be used in flutter_hooks scenarios.
  • Flutter State Management for Minimalist: An introduction to the management and application architecture of Flutter State, which is worth a careful reading.

MobX

Observer and reactive mode based state management library. GitHub: MobX. The goal of MobX is to connect an application’s interface to responsive data. This approach is fully automatic and feels natural (like two-way binding). For developers, just focus on the responsive data that the interface needs to consume, and don’t worry about keeping the two in sync.

Flutter Commands

ValueNotifier, a responsive state management library implemented using the command pattern. The best practice is to combine it with GetIt, but you can also use providers or other containers. Pub address: Flutter Command.

Binder

Based on InheritedWidget’s state management package, modeled after Recoil, the goal is to decouple business, state, and interface.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. GetX has overtaken Provider in popularity because it simplifies much of the implementation code.

States Rebuilder

States Rebuilder is a high performance, expected and controllable state management tool. Support for mutable and immutable states, strict state control, and automatic state clearance. You can also use setState (the state data model class setState) to update the interface in the StatelessWidget, as well as support for page navigation and message prompts without BuildContext. GitHub address: States Rebuilder

The end of the

Wait until kong Yiji finish after writing, I unexpectedly a little surprised, do these he can? But I was too embarrassed to ask him. I had to search according to what he had written. Whether he can or not, there is no way to know!

conclusion

Because Dart has a lot in common with Javascript, there are many javascreen-like libraries on pub, such as Redux, MobX, etc. In fact, there is no best state management tool, only the most appropriate state management tool. For details, please refer to the following points:

  • Update maintenance timeliness: The Flutter itself iterates quickly, so not maintaining some of the plugins means that your entire code will need to change later on, especially if the plugin for state management is involved in the entire application architecture.
  • Number of users: Users can be evaluated by pub ratings and Github ratings. A low number of users means you may have to dig your own mines, which is fine for yourself, but for product development it may affect the overall product development process.
  • Team adaptability: You can ignore this if you’re working on it alone, but if you’re working on a team of multiple people, consider a plugin that everyone can pick up quickly.
  • Native dependencies: There are many plug-ins that rely on the natives, and some of the natives are third-party open source code. If these open source code stops being maintained, the plug-ins that Flutter can’t be updated. Therefore, unless they are official plug-ins, be careful with third party plug-ins that rely on native or even third-party open source code. If possible, choose a pure Dart plug-in.

I’m an island user with the same name on wechat. This is a column on introduction and practice of Flutter.

๐Ÿ‘๐Ÿป : feel a harvest please point to encourage!

๐ŸŒŸ : Collect articles, convenient to read back!

๐Ÿ’ฌ : Comment exchange, mutual progress!