What is state management?

The following is only my opinion, if there is wrong, please do not spray

State management is the management of variables that need to be reused in multiple routing interfaces, hence state management.

If multiple interfaces need to be repeated data, when the interface frequently jump, there is no global state management, it requires each hop routing interface will need to pass values reach the purpose of saving data at a time, when there’s a global state management, each time you need to read or change the data, you can call public method or modify, Therefore, the workload can be greatly reduced and the application performance can be improved

Provider Introduction

I use the provider: ^4.3.2+3, the latest is 5.0.0, you can configure dependencies as needed

Now let’s start implementing counters with providers

Start by creating the Model class

import 'package:flutter/cupertino.dart';
import 'package:flutter/foundation.dart';

// After inheriting ChangeNotifier, all subscribers can be notified
class CounterModel with ChangeNotifier {
  int _count;// To save the data, I implement the counter here, so only an int variable
  CounterModel(this._count);

  void add() {// provide a global method that makes the global count +1
    _count++;
    notifyListeners(); // Notify all subscribers to refresh the UI when the value changes
  }

  get count => _count; // Provide the global GET method to get the total count value
}
Copy the code

Modify the official counter code

Modify the Flutter initial project main.dart

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:provider_demo/provider/Counter.dart';
import 'package:provider_demo/widgets/menu.dart';

void main() {
  runApp(
    ChangeNotifierProvider(// Global state Settings
      create: (context) => CounterModel(0),// Create a counterModel global status class to manage the count value
      child: MyApp(),
    ),
  );
}

// No more introductions
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Provider')); }}class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
        actions: [
          IconButton(
            icon: Icon(Icons.golf_course),
            onPressed: () {// Create a jump interface to jump to the new route without passing any value
              Navigator.push(context, MaterialPageRoute(builder: (context) {
                return MenuView();
              }));
            },
          ),
        ],
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              Provider.of
      
       (context) Attribute values
      
              // Note that attribute values must have get methods in the Model class
              "${Provider.of<CounterModel>(context).count}",
              style: Theme.of(context).textTheme.headline4,// Font style
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(// Create a hover button
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }

  void _incrementCounter() {// Hover button click events
    //context.read
      
       ().
      context.read<CounterModel>().add(); }}Copy the code

A simple global share is done

Results demonstrate

At this time, we found that we had no value to pass and no value to return, so we could easily manage one data through two interfaces, wasn’t it much more efficient

However, we found that only one state can be managed globally, so how can we manage multiple states?

Very simple, in main.dart

will

void main() {
  runApp(
    ChangeNotifierProvider(// Global state Settings
      create: (context) => CounterModel(0),// Create a counterModel global status class to manage the count value
      child: MyApp(),
    ),
  );
}
Copy the code

Instead of

void main() {
  runApp(
    MultiProvider(
      providers: [
        ChangeNotifierProvider(create: (context) => CounterModel(0)),
	// Can continue to add, the syntax as above, so that the global management of multiple states
      ],
      child: MyApp(),
    ),
  );
}
Copy the code

conclusion

Through the simple demo we used the Provider demo counter, so in the actual development, will not only manage such simple data, if too much data management, provider will save us a lot of work

• A Model class can have multiple properties, and an app can have multiple Model classes
• Global management class, don’t have to end with Model, but I personally like to use Model to store data
• The Model class must inherit from the ChangeNotifier class, otherwise the data cannot be refreshed
• The state managed by the Model is changed only by the GET method. Changes to its values are made using separate methods, after which notifyListeners are called