版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
首先添加插件:
dependencies:
provide: ^1.0.2
例子:
首先新建了一个provide包,里面新建了一个counter.dart文件
内容:
import 'package:flutter/material.dart';
class Counter with ChangeNotifier{
int value = 0;
increment(){
value++;
//通知
notifyListeners();
}
}
然后修改main.dart
import 'package:flutter/material.dart';
import 'package:fluttertest/Test.dart';
import 'package:fluttertest/Test2.dart';
import 'package:provide/provide.dart';
import 'provide/counter.dart';
void main() {
var counter = Counter();
var providers = Providers();
providers..provide(Provider<Counter>.value(counter));
runApp(ProviderNode(child: MyApp(), providers: providers));
}
新建了两个界面
页面一:
import 'package:flutter/material.dart';
import 'package:provide/provide.dart';
import 'provide/counter.dart';
class TestPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
body: Center(
child: Column(
children: <Widget>[
Number(),
MyButton(),
Button2(),
],
),
),
);
}
}
class Number extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return Container(
padding: EdgeInsets.only(top: 200.0),
child: Provide<Counter>(
builder: (context, child, counter) {
return Text(
'${counter.value}',
style: TextStyle(
fontSize: 30,
),
);
},
),
);
}
}
class MyButton extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return RaisedButton(
onPressed: () {
Provide.value<Counter>(context).increment();
},
child: Text('递增'),
);
}
}
class Button2 extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return RaisedButton(onPressed: () {
Navigator.of(context).pushNamed('/test2');
},
child: Text('第二个页面'),);
}
}
页面2:
import 'package:flutter/material.dart';
import 'package:fluttertest/provide/counter.dart';
import 'package:provide/provide.dart';
class B extends StatefulWidget{
@override
State<StatefulWidget> createState() {
// TODO: implement createState
return BState();
}
}
class BState extends State<B>{
@override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
appBar: AppBar(),
body: Center(
child:Provide<Counter>(
builder: (context, child, counter) {
return Text(
'${counter.value}',
style: TextStyle(
fontSize: 30,
),
);
},
),
),
);
}
}
会发现虽然是statelesswidget,但还是可以通过Provide来实现全局的状态管理
当点击页面一递增数据后,点击跳转到页面二,会发现状态同时发生了改变