Flutter自定义加载中的Loading

原创已于 2022-02-21 21:36:34 修改 · 3.2k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#flutter #dialog #loading

于 2022-02-21 21:33:40 首次发布

flutter 专栏收录该内容

10 篇文章

订阅专栏

本文介绍了如何在Flutter中创建一个自定义的YmDialog，包括其透明背景和圆形进度条设计。然而，这种方法存在一个问题，即对话框后面的内容无法点击穿透，导致相关事件无法响应。为了解决这个问题并实现点击穿透效果，文章推荐了第三方库flutter_smart_dialog，并提供了使用示例。该库允许用户在显示对话框的同时不影响底层页面的交互。

一、定义

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