在做flutter开发的时候，找了一些类似于ios中 MBProgressHUD,SVProgressHUD第三方的加载对话框，但是在使用的时候总有一些莫名其妙的问题，或者是不能满足自己的需求，所以自己定义了一个适用于自己项目的对话框
- 代码如下
import 'package:flutter/material.dart';
enum ProgressHUDType {
success,
failure,
loading,
none,
}
class PSYProgressHUD extends StatelessWidget {
//对话框类型
final ProgressHUDType type;
//子布局
final Widget child;
//是否显示对话框
final bool isShow;
//对话框文字
final String label;
PSYProgressHUD({
Key key,
@required
this.type,
@required
this.isShow,
@required
this.child,
this.label = '',
}) : super(key: key);
@override
Widget build(BuildContext context) {
List<Widget> list = [];
list.add(child);
if (isShow) {
Widget animationWidget;
if (type == ProgressHUDType.success || type == ProgressHUDType.failure) {
final childList = <Widget>[];
if (label.length > 0) {
childList.add(Image.asset(type == ProgressHUDType.success ? 'assets/images/success.png' : 'assets/images/error.png'));
childList.add(SizedBox(height: 10));
childList.add(Text(label,style: TextStyle(color: Colors.white)));
} else {
childList.add(Image.asset(type == ProgressHUDType.success ? 'assets/images/success.png' : 'assets/images/error.png'));
}
animationWidget = Center(
child: Container(
padding: EdgeInsets.fromLTRB(30, 10, 30, 10),
decoration: BoxDecoration(
color: Colors.black45,
borderRadius: BorderRadius.circular(10.0),
),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisSize: MainAxisSize.min,
children: childList,
),
),
);
} else if (type == ProgressHUDType.loading) {
final childList = <Widget>[];
if (label.length > 0) {
childList.add(CircularProgressIndicator(valueColor: AlwaysStoppedAnimation(Colors.white)));
childList.add(SizedBox(height: 10));
childList.add(Text(label,style: TextStyle(color: Colors.white)));
} else {
childList.add(CircularProgressIndicator(backgroundColor: Colors.white));
}
animationWidget = Center(
child: Container(
padding: EdgeInsets.all(20.0),
decoration: BoxDecoration(
color: Colors.black45,
borderRadius: BorderRadius.circular(10.0),
),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisSize: MainAxisSize.min,
children: childList,
),
),
);
} else {
animationWidget = Center(
child: Container(
padding: EdgeInsets.all(20.0),
decoration: BoxDecoration(
color: Colors.black45,
borderRadius: BorderRadius.circular(10.0),
),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Text(label,style: TextStyle(color: Colors.white)),
],
),
),
);
}
final model = [
Opacity(
child: Container(
color: Colors.black87,
),
opacity: 0.6,
),
animationWidget
];
list += model;
}
return Stack(
children: list,
);
}
}
- 使用方式如下：
@override
Widget build(BuildContext context) {
return Scaffold(
body: PSYProgressHUD(
isShow: _isShow,
type: type,
label: label,
child: Center(
child: Padding(
padding: EdgeInsets.all(40),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
FlatButton (
child: Text('loading'),
onPressed: _loading,
),
FlatButton (
child: Text('success'),
onPressed: _success,
),
FlatButton (
child: Text('failure'),
onPressed: _failure,
),
FlatButton (
child: Text('none'),
onPressed: _none,
),
],
),
),
),
)
);
}
_loading() async{
setState(() {
_isShow = true;
label = 'loading...';
type = ProgressHUDType.loading;
});
}
_success() async{
setState(() {
_isShow = true;
label = 'success';
type = ProgressHUDType.success;
});
await Future.delayed(Duration(seconds: 1),(){
setState(() {
_isShow = false;
});
Navigator.of(context).push(MaterialPageRoute(
builder: (context) => PaperPage()
));
});
}
_failure() async{
setState(() {
_isShow = true;
label = 'failure';
type = ProgressHUDType.failure;
});
await Future.delayed(Duration(seconds: 1),(){
setState(() {
_isShow = false;
});
});
}
_none() async{
setState(() {
_isShow = true;
label = 'done';
type = ProgressHUDType.none;
});
await Future.delayed(Duration(seconds: 1),(){
setState(() {
_isShow = false;
});
});
}
gif没有，放几张静态图片感受一下效果：
loading
success
failure
done
