Flutter自定义加载中的Loading

Posted 2022-02-26 一杯清泉

一、定义

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