flutter 自定义一个你想要的弹窗

flutter中已经为我们提供了一些弹窗组件像showDialog,AlertDialog,但是有时候系统提供的弹窗并不能满足我们的要求,那我们就要自己动手自定义一个.先看效果......

�度.gif

想自定义弹窗最简单的应该就是集成现成的Dialog类,然后我们重新画出我们想要的组件.我们放个Material组件来改变透明度,然后我们居中控件放一个,然后再来个进度条完美

class LoadingDialog extends Dialog {
   String text;
  bool backMiss;
  LoadingDialog({Key key, @required this.text,this.backMiss}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap:(){
        if (backMiss)
          {
            Navigator.of(context).pop();
          }
      },
      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(
                      text,
                      style: new TextStyle(fontSize: 12.0),
                    ),
                  ),
                ],
              ),
            ),
          ),
        ),
      ) ,
    );
  }
}

其实这个类里有这么几行代码,我们给Material组件加了个点击效果,点击后弹窗会隐藏

 GestureDetector(
      onTap:(){
        if (backMiss)
          {
            Navigator.of(context).pop();
          }
      },

这是因为虽然原生组件Dialog给了一个属性 barrierDismissible,这个属性控制点击外部弹窗是否能消失但是自定义后,这个属性无效了,原因我不知道,希望大神能告诉我,小弟感激不尽.所以我只能用添加手势来解决.定义好我们的组件以后我们在想要用的时候调用就好了

//展示弹窗
                  showDialog<Null>(
                      context: context, //BuildContext对象
                      //点击外部可以消失
                      barrierDismissible: false,
                      builder: (BuildContext context) {
                        return new LoadingDialog( //调用对话框
                          text: '正在加载...',
                          backMiss: false,
                        );
                      });

大功告成!!!!

写在最后,一直想一口吃个胖子,经过开发发现,很多细节想起来很容易,实现起来发现还是有些小问题的,所以希望能列个单子,把很细节实用的东西都记录下来,对抗自己的拖延症,加油....