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视频。