Flutter 自定义加载框

在之前的布局，并没有想到加载框怎么比较好实现，说一下rn思路用的是absolute，iOS和安卓基本用是在window层上添加加载页面或者是当前页面添加一个subview，开始我想到的思路，我觉得应该和rn一样 是不是会有一个这样的控件，查了一下，用stack，里面有个position属性，但是试验了，很多的局限性，不利于封装，最后想到了dialog，我能不能再dialog上面添加加载布局呢，想想感觉应该可以，于是我就试验了起来。这里用到了加载指示器的库

flutter_spinkit: "^3.1.0"

具体操作就不在说明

 _showLoading(){
    showDialog(context:context,builder: (BuildContext context){
      return new Dialog(
          child: new Container(
              width: 150,
              height: 150,
              child:new Center(
                  child:new Container(
                    width: 150,
                    height: 150,
                    color: Colors.black38,
                    child: SpinKitCircle(
                      color: Colors.white,
                      size: 50,
                    ),
                  )
              ),
            ),
      );
    }).then((val){
      //用户点击
    });
  }

最后一看效果，不行，没有达到想要的效果，没办法，最后想想重写dialog 

那么我就开始重写

class LoadingDialog extends Dialog {

  @override
  Widget build(BuildContext context) {
    //创建透明层
    return new Material( 
      type: MaterialType.transparency,
      child: new Container(
        width: 150,
        height: 150,
        child:new Center(
            child:new Container(
              width: 150,
              height: 150,
              color: Colors.black38,
              child: SpinKitCircle(
                color: Colors.white,
                size: 50,
              ),
            )
        ),
      ),
    );
  }
}

 

还不错，最后就是在widget里面慢慢添加你想要的效果了，然后慢慢优化布局