一、定义
class YmDialog extends Dialog {
final String title;
const YmDialog(this.title, {Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
// TODO: implement build
return Center(
//创建透明层
child: Material(
type: MaterialType.transparency, //透明类型
child: SizedBox(
width: 120,
height: 120,
child: Container(
decoration: ShapeDecoration(
color: ThemeColors.color585858,
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(5.0)))),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
const CircularProgressIndicator(
color: Colors.white,
),
Padding(
padding: const EdgeInsets.only(top: 14),
child: Text(
title,
style: const TextStyle(fontSize: 14.0, color: Colors.white),
),
),
],
),
),
),
),
);
}
}
二、显示
showDialog(
context: context,
barrierColor: Colors.transparent, //背景透明
barrierDismissible: false, // 屏蔽点击对话框外部自动关闭
builder: (BuildContext context) {
return const YmDialog("加载中…");
});
缺点:
无法点击穿透dialog后面的页面事件,例如首页的显示图片,显示加载中后面的「点击显示消息提示框」就无法响应,如果有这个需求的就不能用了,需使用第三方库flutter_smart_dialog:
https://pub.flutter-io.cn/packages/flutter_smart_dialog/install