Flutter-Dialog

Dialog
A material design dialog.

定义:
Dialog向用户传递信息的弹出层.需要说明的是,Dialog本身没有提供标题选项等操作,相比AlertDialog需要更多的自定义.

基本用法:
作为child传递给showDialog显示使用.注意弹出的Dialog并不是一个单纯的组件,而是一个新的路由界面,如果想更新Dialog中的内容,需要使用State来更新界面中的状态.

代码示例:

import 'package:flutter/material.dart';

class MyDialog extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: FlatButton(
          onPressed: () {
            showMyDialog(context);
          },
          child: Text(
            'Dialog',
            style: TextStyle(
                fontSize: 16.0,
                fontWeight: FontWeight.bold,
                color: Colors.green),
          ),
          color: Colors.grey,
        ),
      ),
    );
  }

  void showMyDialog(BuildContext context) {
    showDialog(
        context: context,
        barrierDismissible: false,
        builder: (BuildContext context) {
          return Dialog(
          child: _contentWidget(context),
          insetAnimationCurve: Curves.fastOutSlowIn,
            insetAnimationDuration: Duration(milliseconds: 100),
            shape: SuperellipseShape(borderRadius:BorderRadius.all(Radius.circular(20.0))),
          );
        });
  }

  Widget _contentWidget(BuildContext context) {
    return Center(
      widthFactor: 2.0,
      heightFactor: 1.0,
      child: Container(
        width: 300.0,
        height: 200.0,
        color: Colors.white,
        child: Column(
          children: [
            Expanded(
              child: Container(
                padding: EdgeInsets.only(top: 5.0),
                child: Text('This is title',style: TextStyle(color: Colors.black,fontWeight: FontWeight.bold,fontSize: 22.0),),
              ),
              flex: 1,
            ),
            Expanded(
              child: Container(
                alignment: Alignment.topLeft,
                margin: EdgeInsets.all(20.0),
                child: Text('this is content this is content this is content this is content this is content',style: TextStyle(fontSize: 18.0,color: Colors.black),),
              ),
              flex: 3,
            ),
            Expanded(
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: [
                  RaisedButton(onPressed: (){
                      Navigator.of(context).pop();
                  },
                  child: Text('取消',style: TextStyle(color: Colors.white)),color: Colors.grey,),
                  RaisedButton(onPressed: (){
                    Navigator.of(context).pop();
                  },
                    child: Text('确定',style: TextStyle(color: Colors.white),),color: Colors.blue,),
                ],
              ),
              flex: 2,
            ),
          ],
        ),
      ),
    );
  }
}

继承关系:
Object -> Diagnosticable -> DiagnosticableTree -> Widget -> StatelessWidget -> Dialog

构造方法:

Dialog({Key key, Color backgroundColor, double elevation, Duration insetAnimationDuration: const Duration(milliseconds: 100), Curve insetAnimationCurve: Curves.decelerate, ShapeBorder shape, Widget child })
Creates a dialog. [...]

• backgroundColor → Color dialog的背景颜色
• child → Widget 子孩子树
• elevation → double 底部阴影高度
• insetAnimationCurve → Curve 当系统键盘插入对话框所在的空间时，用于动画显示的曲线
• insetAnimationDuration → Duration 当系统键盘进入对话框所在的空间时显示的动画的持续时间
• shape → ShapeBorder Dialog边框圆角

样式:

image.png

基本就是自定义实现自己需要定制的样式.