Flutter 自定义loading及使用

Flutter 自定义loading及使用

• 1.首先写一个公共组件
• 2.封装loading组建
• 3.调用loading弹窗

1.首先写一个公共组件

new 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(
                    valueColor: new AlwaysStoppedAnimation(Color(0xffAA1F52))),
                new Padding(
                  padding: const EdgeInsets.only(
                    top: 20.0,
                  ),
                  child: new Text(widget.text),
                ),
              ],
            ),
          ),
        ),
      ),
    );

2.封装loading组建

void showLoading(BuildContext context,String text){
  showDialog(
    context: context,
    barrierDismissible: false,
    builder: (BuildContext context) {
      return new Loading(
        text,
      );
    }
  );
}

3.调用loading弹窗

 showLoading(context, "加载中");

效果如下：：：