Flutter实战（四）---LoadingDialog

在实际项目开发中，我们获取数据总会有一个等待过程，为了不让用户迷惑或者误操作，我们一般都会设计一个等待加载框 ，起到一个呈现数据前的过渡作用。

效果：

实现：

• 自定义一个等待加载提示框，继承Dialog

/*
 * 自定义等待加载提示框
 * Created by ZhangJun on 2018-11-29
 */

import 'package:flutter/material.dart';

class LoadingDialog extends Dialog {
  final String text;

  LoadingDialog({Key key, @required this.text}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return 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(),
                new Padding(
                  padding: const EdgeInsets.only(
                    top: 20.0,
                  ),
                  child: new Text(text),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

• 显示Dialog

showDialog(
    context: context,
    barrierDismissible: false,
    builder: (BuildContext context) {
      return new LoadingDialog(
        text: "账号登录中…",
      );
    });

• 关闭Dialog

Navigator.pop(context);