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