flutter loading 动画插件（flutter_spinkit 4.1.2）
flutter_spinkit 4.1.2
pubspec.yaml 中添加依赖
1
2
dependencies:
flutter_spinkit: "^4.1.2"
阅读文档，看看案例。照着实现一个最简单的例子
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
void main() => runApp(App());
class App extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'loading 动画',
debugShowCheckedModeBanner: false,
theme: ThemeData(
brightness: Brightness.dark,
),
home: Scaffold(
// SafeArea 异形屏适配
body: SafeArea(
// 层叠布局
child: Stack(
children: <Widget>[
Positioned.fill(
child: Container(
decoration: BoxDecoration(color: Colors.white),
),
),
Positioned.fill(
child: Container(
// color: Colors.blueAccent,
color: Colors.transparent,
child: SpinKitFadingCircle(
// 可以画一个圈，分为 0 1 2 3 4 5 6 7 8 9 份
itemBuilder: (_, int index) {
return DecoratedBox(
decoration: BoxDecoration(
// isEven 表示是否整数
color: index.isEven ? Colors.red : Colors.green,
),
child: Text("$index"),
);
},
size: 120.0,
),
),
)
],
),
),
),
);
}
}
模拟一个简单的场景，点击登录出现 loading 动画，一段时间后取消
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
void main() => runApp(App());
class App extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'loading 动画',
debugShowCheckedModeBanner: false,
theme: ThemeData(
brightness: Brightness.dark,
),
home: Scaffold(
// SafeArea 异形屏适配
body: BodyWidget(),
),
);
}
}
class BodyWidget extends StatefulWidget {
@override
_BodyWidgetState createState() => _BodyWidgetState();
}
class _BodyWidgetState extends State<BodyWidget> {
bool ifLoading = false;
Timer timer;
@override
Widget build(BuildContext context) {
return SafeArea(
child: Stack(
children: <Widget>[
Positioned.fill(
child: Container(
decoration: BoxDecoration(color: Colors.white),
child: Column(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
RaisedButton(
child: Text("登录"),
onPressed: () {
print("登录啊");
setState(() {
ifLoading = true;
});
// 三秒后取消动画
timer = new Timer(Duration(seconds: 3), () {
setState(() {
ifLoading = false;
});
});
},
),
],
),
),
),
ifLoading
? Positioned.fill(
child: Container(
color: Colors.blueAccent,
child: SpinKitFadingCircle(
// 可以画一个圈，分为 0 1 2 3 4 5 6 7 8 9 份
itemBuilder: (_, int index) {
return DecoratedBox(
decoration: BoxDecoration(
// isEven 表示是否整数
color: index.isEven ? Colors.red : Colors.green,
),
child: Text("$index"),
);
},
size: 80.0,
),
),
)
: Container(),
],
),
);
}
}
引入 provider 模拟更加真实的例子
1
2
3
dependencies:
flutter_spinkit: "^4.1.2"
provider: ^4.0.4
看到的效果是一样的
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
void main() => runApp(App());
class App extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'loading 动画',
debugShowCheckedModeBanner: false,
theme: ThemeData(
brightness: Brightness.dark,
),
home: Scaffold(
// SafeArea 异形屏适配
body: MultiProvider(
providers: [
ChangeNotifierProvider(
create: (_) => LoginProvider(),
)
],
child: Consumer<LoginProvider>(builder: (context,loginProvider,_){
return BodyWidget(ifLoading: loginProvider.ifLoading,onPressed: loginProvider.onPressed,);
},),
),
),
);
}
}
class LoginProvider with ChangeNotifier {
bool ifLoading = false;
VoidCallback onPressed;
Timer timer;
LoginProvider() {
onPressed = () {
ifLoading = true;
// notifyListeners 我的理解就是把它当做 setState 用
notifyListeners();
// 模拟发送网络请求异步获得请求结果
timer = new Timer(Duration(seconds: 3), () {
ifLoading = false;
notifyListeners();
});
};
}
}
class BodyWidget extends StatelessWidget {
bool ifLoading = false;
VoidCallback onPressed;
BodyWidget({@required this.ifLoading, @required this.onPressed});
@override
Widget build(BuildContext context) {
return SafeArea(
child: Stack(
children: <Widget>[
Container(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height,
decoration: BoxDecoration(color: Colors.amberAccent),
child: Column(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
RaisedButton(
child: Text("登录"),
onPressed: onPressed,
),
],
),
),
ifLoading
? Positioned.fill(
child: Container(
color: Colors.blueAccent,
child: SpinKitFadingCircle(
// 可以画一个圈，分为 0 1 2 3 4 5 6 7 8 9 份
itemBuilder: (_, int index) {
return DecoratedBox(
decoration: BoxDecoration(
// isEven 表示是否整数
color: index.isEven ? Colors.red : Colors.green,
),
child: Text("$index"),
);
},
size: 120.0,
),
),
)
: Container(),
],
),
);
}
}