Flutter 自定义Dialog

最新推荐文章于 2024-03-19 20:29:28 发布

原创最新推荐文章于 2024-03-19 20:29:28 发布 · 3.5k 阅读

4 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#Flutter #Dialog

Flutter 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了如何在Flutter中创建自定义的加载对话框。内容包括实现思路、代码展示及使用方法。通过在最外层使用GestureDetector监听触摸事件，实现点击取消时调用dismissCallback关闭对话框。同时，文章提及打开的Dialog会开启新的路由，类似跳转到新界面的效果，并推荐了一则仿微信Flutter视频教程。

今天分享一下Flutter的自定义的 loading diaolog。

先上效果图

不要在意UI、分享下大概思路?

上代码

import 'package:flutter/material.dart';

// ignore: must_be_immutable
class LoadingDialog extends Dialog {
  String loadingText;
  bool outsideDismiss;
  Function dismissCallback;

  LoadingDialog(
      {Key key,
      this.loadingText = "loading...",
      this.outsideDismiss = true,
      this.dismissCallback})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    _dismissDialog() {
      if (dismissCallback != null) {
        dismissCallback();
      }
      Navigator.of(context).pop();
    }

    return new GestureDetector(
      onTap: outsideDismiss ? _dismissDialog : null,
      child: Material(
        type: MaterialType.transparency,
        child: new Center(
          child: new SizedBox(
            width: 120.0,
            height: 120.0,
            child: new Container(
              decoration: ShapeDecoration(
                color: Color(0xffffffff),
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.all(
                    Radius.circular(8.0),
                  ),
                ),
              ),
              child: new Column(
                mainAxisAlignment: MainAxisAlignment.center,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: <Widget>[
                  new CircularProgressIndicator(),
                  new Padding(
                    padding: const EdgeInsets.only(
                      top: 20.0,
                    ),
                    child: new Text(
                      loadingText,
                      style: new TextStyle(fontSize: 12.0),
                    ),
                  ),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}

这里主要是在最外层套了一个GestureDetector用于获取触摸事件，然后通过传参判断是否取消显示，最后在取消前调用 dismissCallback；

How to use

  showLoadingDialog() {
    showDialog(
        context: context,
        barrierDismissible: true,
        builder: (BuildContext context) {
          return new LoadingDialog(
            dismissCallback: () {
              print("dismiss");
            },
          );
        });
  }