今天学习下Flutter中state管理的第三方provider的4.x新版本.
其中,provider: 4.3.2+2, 3.1.0旧版本在文章末尾。

代码结构如图所示:
provider_demo代码结构

下面是各文件的源码.

main.dart

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:provider_demo1/tabbar.dart';
import 'package:provider_demo1/provider/color_provider.dart';
import 'package:provider_demo1/provider/counter_provider.dart';

void main() {
var colorProvider = ColorProvider();
var counterProvider = CounterProvider();
Provider.debugCheckInvalidValueType = null;

runApp(MultiProvider(
providers: [
ChangeNotifierProvider.value(value: colorProvider),
ChangeNotifierProvider.value(value: counterProvider),
],
child: MyApp(),
));
}

class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return Consumer<CounterProvider>(
builder: (context, model, child) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: Tabbar(),
);
},
);
}
}


tabbar.dart

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
import 'package:flutter/material.dart';
import 'package:provider_demo1/pages/one_pege.dart';
import 'package:provider_demo1/pages/two_page.dart';

class Tabbar extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
debugShowCheckedModeBanner: false, home: new MainPageWidget());
}
}

class MainPageWidget extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return new MainPageState();
}
}

class MainPageState extends State<MainPageWidget> {
int _tabIndex = 0;
var tabImages;
var appBarTitles = ['One', 'Two'];
/*
* 存放二个页面,跟fragmentList一样
*/
var _pageList;

/*
* 根据选择获得对应的normal或是press的icon
*/
Image getTabIcon(int curIndex) {
if (curIndex == _tabIndex) {
return tabImages[curIndex][1];
}
return tabImages[curIndex][0];
}

/*
* 获取bottomTab的颜色和文字
*/
String getTabTitle(int curIndex) {
if (curIndex == _tabIndex) {
return appBarTitles[curIndex];
} else {
return appBarTitles[curIndex];
}
}

/*
* 根据image路径获取图片
*/
Image getTabImage(path) {
return new Image.asset(path, width: 24.0, height: 24.0);
}

void initData() {
/*
* 初始化选中和未选中的icon
*/
tabImages = [
[
getTabImage('images/tab/home.png'),
getTabImage('images/tab/home_select.png')
],
[
getTabImage('images/tab/show.png'),
getTabImage('images/tab/show_select.png')
],
];
/*
* 子界面
*/
_pageList = [
new OnePage(),
new TwoPage(),
];
}

@override
Widget build(BuildContext context) {
//初始化数据
initData();
return Scaffold(
body: _pageList[_tabIndex],
bottomNavigationBar: new BottomNavigationBar(
items: <BottomNavigationBarItem>[
new BottomNavigationBarItem(
icon: getTabIcon(0), label: getTabTitle(0)),
new BottomNavigationBarItem(
icon: getTabIcon(1), label: getTabTitle(1)),
],
type: BottomNavigationBarType.fixed,
//默认选中首页
currentIndex: _tabIndex,
iconSize: 24.0,
//点击事件
onTap: (index) {
setState(() {
_tabIndex = index;
});
},
));
}
}


color_provider.dart

1
2
3
4
5
6
7
8
9
10
11
12
13
import 'package:flutter/material.dart';

class ColorProvider with ChangeNotifier {
Color _color = Colors.red;

Color get color => _color;

changeColor() {
_color = _color == Colors.red ? Colors.blue : Colors.red;
notifyListeners();
}
}

counter_provider.dart

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
import 'package:flutter/material.dart';

class CounterProvider with ChangeNotifier {
int _count = 0;

int get count => _count;

addCounter() {
_count++;
notifyListeners();
}

subCounter() {
_count--;
notifyListeners();
}
}


one_page.dart

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:provider_demo1/provider/color_provider.dart';
import 'package:provider_demo1/provider/counter_provider.dart';

class OnePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('One'),
),
body: Consumer<CounterProvider>(
builder: (context, model, child) {
return ListView(
children: [
IconButton(
icon: Icon(Icons.add),
onPressed: () {
model.addCounter();
},
),
Chip(
backgroundColor: Provider.of<ColorProvider>(context).color,
padding: EdgeInsets.all(12.0),
label: Text(
model.count.toString(),
style: TextStyle(fontSize: 30.0),
),
),
IconButton(
icon: Icon(Icons.remove),
onPressed: () {
model.subCounter();
},
),
],
);
},
),
);
}
}


two_page.dart

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:provider_demo1/provider/color_provider.dart';
import 'package:provider_demo1/provider/counter_provider.dart';

class TwoPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Two'),
),
body: Consumer<CounterProvider>(
builder: (context, model, child) {
return ListView(
children: [
IconButton(
icon: Icon(Icons.add),
onPressed: () {
model.addCounter();
},
),
Chip(
backgroundColor: Provider.of<ColorProvider>(context).color,
padding: EdgeInsets.all(12.0),
label: Text(
model.count.toString(),
style: TextStyle(fontSize: 30.0),
),
),
IconButton(
icon: Icon(Icons.remove),
onPressed: () {
model.subCounter();
},
),
],
);
},
),
floatingActionButton: FloatingActionButton(
onPressed: () {
Provider.of<ColorProvider>(context, listen: false).changeColor();
},
child: Icon(
Icons.build,
color: Colors.white,
),
),
);
}
}


效果图:
provider_demo

<——————————–2023-11-02,再写一下对provider的封装使用———————————–>

封装成这样:

provider_widget.dart

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
// ignore_for_file: prefer_const_constructors_in_immutables

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

/// Provider封装类 方便数据初始化
class ProviderWidget<T extends ChangeNotifier> extends StatefulWidget {
final ValueWidgetBuilder<T> builder;
final T model;
final Widget? child;
final Function(T model)? onModelReady;
final bool autoDispose;

ProviderWidget({
Key? key,
required this.builder,
required this.model,
this.child,
this.onModelReady,
this.autoDispose = true,
}) : super(key: key);

_ProviderWidgetState<T> createState() => _ProviderWidgetState<T>();
}

class _ProviderWidgetState<T extends ChangeNotifier>
extends State<ProviderWidget<T>> {
late T model;

@override
void initState() {
model = widget.model;
widget.onModelReady?.call(model);
super.initState();
}

@override
void dispose() {
if (widget.autoDispose) model.dispose();
super.dispose();
}

@override
Widget build(BuildContext context) {
return ChangeNotifierProvider<T>.value(
value: model,
child: Consumer<T>(
builder: widget.builder,
child: widget.child,
),
);
}
}

class ProviderWidget2<A extends ChangeNotifier, B extends ChangeNotifier>
extends StatefulWidget {
final Widget Function(BuildContext context, A model1, B model2, Widget? child)
builder;
final A model1;
final B model2;
final Widget? child;
final Function(A model1, B model2)? onModelReady;
final bool autoDispose;

ProviderWidget2({
Key? key,
required this.builder,
required this.model1,
required this.model2,
this.child,
this.onModelReady,
this.autoDispose = true,
}) : super(key: key);

_ProviderWidgetState2<A, B> createState() => _ProviderWidgetState2<A, B>();
}

class _ProviderWidgetState2<A extends ChangeNotifier, B extends ChangeNotifier>
extends State<ProviderWidget2<A, B>> {
late A model1;
late B model2;

@override
void initState() {
model1 = widget.model1;
model2 = widget.model2;
widget.onModelReady?.call(model1, model2);
super.initState();
}

@override
void dispose() {
if (widget.autoDispose) {
model1.dispose();
model2.dispose();
}
super.dispose();
}

@override
Widget build(BuildContext context) {
return MultiProvider(
providers: [
ChangeNotifierProvider<A>.value(value: model1),
ChangeNotifierProvider<B>.value(value: model2),
],
child: Consumer2<A, B>(
builder: widget.builder,
child: widget.child,
));
}
}

使用:

逻辑部分如下:

home_vm.dart

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
/*
* @Author: zhoushaoting 510738319@qq.com
* @Date: 2023-11-02 16:29:16
* @LastEditors: zhoushaoting 510738319@qq.com
* @LastEditTime: 2023-11-02 16:40:03
* @FilePath: /provider_init/lib/home/home_vm.dart
* @Description: 逻辑
*/

import 'package:flutter/material.dart';

class HomeVM extends ChangeNotifier{
int num = 0;


void add(){
num++;
notifyListeners();
}

void minus(){
num--;
notifyListeners();
}

}

UI部分如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
/*
* @Author: zhoushaoting 510738319@qq.com
* @Date: 2023-11-02 16:29:16
* @LastEditors: zhoushaoting 510738319@qq.com
* @LastEditTime: 2023-11-02 16:50:46
* @FilePath: /provider_init/lib/home/home_page.dart
* @Description: UI
*/

import 'package:flutter/material.dart';
import 'package:provider_init/home/home_vm.dart';
import 'package:provider_init/utils/provider_widget.dart';

class HomePage extends StatefulWidget {
const HomePage({super.key});

@override
State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
late final HomeVM _homeVM = HomeVM();

@override
void dispose() {
_homeVM.dispose();
super.dispose();
}

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Home Page'),
),
body: ProviderWidget<HomeVM>(
autoDispose: false,
model: _homeVM,
builder: (context, ref, child) {
return Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
InkWell(
onTap: () => ref.add(),
child: Container(
height: 50,
alignment: Alignment.center,
child: const Text('+'),
),
),
Text('${ref.num}'),
InkWell(
onTap: () => ref.minus(),
child: Container(
height: 50,
alignment: Alignment.center,
child: const Text('-'),
),
),
],
);
},
),
);
}
}

功能和之前的一样,但是这样更加清晰,UI和逻辑完全分开,也和之前一样不再使用setSatte直接刷新build。

文章源码

provider的封装使用源码

3.1.0版本源码

另外:其他管理库学习

另外:Flutter学习demo