There are two types of Fletter # state management
1. Stateless: statelesswidget means that their properties are immutable
2. Stateful: statefulwidget’s state may change during the widget’s life cycle
When our project is simple, we may not need state management, but with the increase of functions, the application will have dozens or even hundreds of application states. When we want to share state (data) between multiple pages (components / widgets) or between multiple sub components in a page (components / widgets), the application state will become difficult to maintain, Flutter actually provided us with a state management method from the beginning, that is statefulwidget, but it was soon found that it was the root cause of the above problems, so we used provider to manage the state.
effect:
The top-level widget is used to store data and does not operate data. The stored data object must be extended changenotifier;
Final effect:
When you click add value in the second page, the value returned to the first page will also change
Provider is an open source library of state management in fluent. How to use it
1. In pubspec Add dependency of provider in yaml (configuration file)
2. Create data model
import ‘package:flutter/cupertino.dart’;
class Counter with ChangeNotifier {
///Store data
int_count =0;
///Provide externally accessible data
intget count =>_count;
///Provides methods for changing data
void increment() {
_count++;
///Notify all listeners to refresh
notifyListeners();
}
}
3. Create top-level shared data. Here, multiprovider can be used to create multiple top-level shared data. It should be that there may be multiple data models in the actual project
In main Created in dart entry function
@override
Widget build(BuildContext context) {
///Using multiprovider, you can create multiple top-level shared data
return MultiProvider(
providers: [ChangeNotifierProvider(create: (_) =>Counter())],
child:MaterialApp(
Title: ‘flight’,
home:isSplash ?LoginPage() :SplashPage(),
),
);
}
4、 To obtain the status in the sub page, we have written two classes, firstpage and {secondpage, respectively
The method to obtain top-level data is: provider of<Counter>(context). count
Call increment in the data model to refresh the data: provider of<Counter>(context,listen:false). increment();
Create first page firstpage
package:flutter/material.dart’;
import ‘package:flutter_app1/common/utils/NavigatorUtil.dart’;
import ‘package:flutter_app1/module/login/myprovider/Counter.dart’;
import ‘package:flutter_app1/module/login/myprovider/second_page.dart’;
import ‘package:provider/provider.dart’;
class FirstPage extends StatelessWidget {
const FirstPage({Key key}) :super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar:AppBar(
Title: text (“first page”),
),
body:Column(
children: [
///Gets the count value in the counter
Text(“${Provider.of(context).count}”),
GestureDetector(
onTap: () {
NavigatorUtil.pushRightOrLeft(context, SecondPage());
},
child:Container(
width: MediaQuery.of(context).size.width,
height:40,
decoration:BoxDecoration(color: Colors.black26),
child:Center(
Child: text (“click on the next page, style: TextStyle (color: colors. White)),
),
),
)
],
),
);
}
}
Create a second interface {secondpage
import ‘package:flutter/material.dart’;
import ‘package:flutter_app1/module/login/myprovider/Counter.dart’;
import ‘package:provider/provider.dart’;
class SecondPage extends StatelessWidget {
const SecondPage({Key key}) :super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar:AppBar(
Title: text (“second page”),
),
body:Center(
///Gets the count value in the counter
child:Text(“${Provider.of(context).count}”),
),
floatingActionButton:FloatingActionButton(
onPressed: (){
///Call increment in the data model to refresh the data
Provider.of(context,listen:false).increment();
},
child:Icon(Icons.add),
),
);
}
}