Flutter 自定义各种对话框

[dkvirus]

• [x] 加载框；
• [x] 文字提示框；

[dkvirus]

Flutter - 自定义Dialog

[dkvirus]

文字提示框

components/ToastDialog.dart

import 'package:flutter/material.dart';

// ignore: must_be_immutable
class ToastDialog extends Dialog {
  String text;

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

  @override
  Widget build (BuildContext context) {
    return new Material(
      type: MaterialType.transparency,
      child: Align(
        alignment: Alignment(0.0, 0.8),
        child: Container(
          decoration: ShapeDecoration(
            color: Color(0xffffffff),
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.all(
                Radius.circular(8.0),
              ),
            ),
          ),
          child: Padding(
            padding: EdgeInsets.symmetric(horizontal: 20.0, vertical: 10.0),
            child: new Text(
              text,
              style: new TextStyle(fontSize: 12.0),
            ),
          ),
        ),
      ),
    );
  }
}

[dkvirus]

加载框

components/LoadingDialog.dart

import 'package:flutter/material.dart';

// ignore: must_be_immutable
class LoadingDialog extends Dialog {
  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,
                    style: new TextStyle(fontSize: 12.0),
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

[dkvirus]

上面👆两个对话框组件直接使用还是有点麻烦，封装个对话框工具类。

utils/DialogUtils.dart

import 'package:flutter/material.dart';
import 'dart:async';
import '../components/ToastDialog.dart';
import '../components/LoadingDialog.dart';

class DialogUtils {

  /// 显示文字对话框
  static showToastDialog (context, { text, duration }) {
    showDialog<Null>(
      context: context,   // BuildContext对象
      barrierDismissible: false,
      builder: (BuildContext context) {
        return ToastDialog( // 调用对话框
          text: text ?? '操作成功',
        );
    });
    // 定时器关闭对话框
    new Timer(new Duration(milliseconds: duration ?? 1500), () {
      closeLoadingDialog(context);
    });
  }

  // 显示加载对话框
  static showLoadingDialog (context, { text }) {
    showDialog<Null>(
        context: context,   // BuildContext对象
        barrierDismissible: false,
        builder: (BuildContext context) {
          return LoadingDialog( // 调用对话框
              text: text ?? '加载中...',
          );
      });
  }

  // 关闭加载对话框
  static closeLoadingDialog (context) {
    Navigator.pop(context);
  }

}

使用示例：

DialogUtils.showToastDialog(context, text: '登录成功');