先上效果图:
自定义loading.dart类
import 'package:flutter/material.dart';
class ProgressDialog extends StatelessWidget {
//子布局
final Widget child;
//加载中是否显示
final bool loading;
//进度提醒内容
final String msg;
//加载中动画
final Widget progress;
//背景透明度
final double alpha;
//字体颜色
final Color textColor;
ProgressDialog(
{Key key,
@required this.loading,
this.msg,
this.progress = const CircularProgressIndicator(),
this.alpha = 0.6,
this.textColor = Colors.black,
@required this.child})
: assert(child != null),
assert(loading != null),
super(key: key);
@override
Widget build(BuildContext context) {
List<Widget> widgetList = [];
widgetList.add(child);
if (loading) {
Widget layoutProgress;
if (msg == null) {
layoutProgress = Center(
child: progress,
);
} else {
layoutProgress = Center(
child: Container(
padding: const EdgeInsets.all(15.0),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(4.0)),
child: Container(
padding: const EdgeInsets.only(left:20.0),
alignment: Alignment.centerLeft,
width: MediaQuery.of(context).size.width * 0.75,
height: 50.0,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
progress,
Container(
margin: const EdgeInsets.only(left:20.0),
child: Text(
msg,
style: TextStyle(color: textColor, fontSize: 16.0),
),
),
],
),
),
),
);
}
widgetList.add(Opacity(
opacity: alpha,
child: new ModalBarrier(color: Colors.black87,dismissible: false,),
));
widgetList.add(layoutProgress);
}
return Stack(
children: widgetList,
);
}
}
可以随意改变样式,背景透明度,布局等。
使用方法:
body: ProgressDialog(
loading: _loading,
msg: '正在加载...',
child: Center(
child: RaisedButton(
onPressed: () => _onRefresh(),
child: Text('显示加载动画'),
),
),
),
调用loading的完整代码:
import 'package:flutter/material.dart';
import 'package:my_flutter/loading.dart';
import 'package:fluttertoast/fluttertoast.dart';
class LoadingDemo extends StatefulWidget {
@override
_LoadingDemoState createState() => _LoadingDemoState();
}
class _LoadingDemoState extends State<LoadingDemo> {
bool _loading = false;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Loading'),
backgroundColor: Colors.blueAccent,
),
body: ProgressDialog(
loading: _loading,
msg: '正在加载...',
child: Center(
child: RaisedButton(
onPressed: () => _onRefresh(),
child: Text('显示加载动画'),
),
),
),
);
}
_onRefresh() async {
setState(() {
_loading = !_loading;
});
await Future.delayed(Duration(seconds: 3), () {
setState(() {
_loading = !_loading;
Fluttertoast.showToast(msg: '加载完成');
});
});
}
}
注意:有个地方大家注意一下,默认点击loading周边黑色区域,当前页面会关闭,需要加一句代码:就是ModalBarrier这个组件的
dismissible属性,设置为false即可:
修改loading样式,只需修改loading.dart中的layoutProgress布局
修改后的loading.dart代码
import 'package:flutter/material.dart';
class ProgressDialog extends StatelessWidget {
//子布局
final Widget child;
//加载中是否显示
final bool loading;
//进度提醒内容
final String msg;
//加载中动画
final Widget progress;
//背景透明度
final double alpha;
//字体颜色
final Color textColor;
ProgressDialog(
{Key key,
@required this.loading,
this.msg,
this.progress = const CircularProgressIndicator(),
this.alpha = 0.6,
this.textColor = Colors.black,
@required this.child})
: assert(child != null),
assert(loading != null),
super(key: key);
@override
Widget build(BuildContext context) {
List<Widget> widgetList = [];
widgetList.add(child);
if (loading) {
Widget layoutProgress;
if (msg == null) {
layoutProgress = Center(
child: progress,
);
} else {
layoutProgress = Center(
child: Container(
padding: const EdgeInsets.all(20.0),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(4.0)),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
progress,
Container(
padding: const EdgeInsets.fromLTRB(10.0, 10.0, 10.0, 0),
child: Text(
msg,
style: TextStyle(color: textColor, fontSize: 16.0),
),
)
],
),
),
);
}
widgetList.add(Opacity(
opacity: alpha,
child: new ModalBarrier(color: Colors.black87,dismissible: false,),
));
widgetList.add(layoutProgress);
}
return Stack(
children: widgetList,
);
}
}
当然UI妹纸需要什么的样式,修改一下布局就好