Flutter 自定义Dialog

  今天分享一下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");
            },
          );
        });
  }

最后点击外层取消的时候就会在控制台输出dismiss了。
还有一个小问题，就是其实打开的Dialog已经是另外一个路由了，相当于已经跳转到了另外一个界面。

顺带推荐一波大佬录制的仿微信Flutter视频。