flutter

自定义Dialog对话框

Posted by アライさん on 2019年10月22日 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
showDialog(
            context: context,
            barrierDismissible: false,
            builder: (BuildContext context) {
              return CustomDialog(
                title: '已找到',
                message: '''$_name\r\n是否添加？''',
                leftBtnText: '返回',
                rightBtnText: '添加',
                rightCallback: () {
                  _insert(_name, _url);
                  Navigator.pop(context);
                },
              );
            });
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
import 'package:flutter/material.dart';

/// 带标题、信息，1~2个按钮的提示框
class CustomDialog extends Dialog {
  //标题
  final String title;

  //信息
  final String message;

  //左侧按钮
  final String leftBtnText;

  //右侧按钮
  final String rightBtnText;

  //左侧按钮点击事件
  final VoidCallback leftCallback;

  //右侧按钮点击事件
  final VoidCallback rightCallback;

  //圆角值
  final double radius = 5.0;

  CustomDialog(
      {Key key,
      this.title = '提示',
      @required this.message,
      this.leftBtnText,
      @required this.rightBtnText,
      this.leftCallback,
      this.rightCallback})
      : super(key: key);

  //用于按钮widgets中过滤掉null的按钮
  bool notNull(Object o) => o != null;

  @override
  Widget build(BuildContext context) {
    return Material(
      type: MaterialType.transparency,
      child: Center(
        child: Container(
          width: 300.0,
          padding: EdgeInsets.only(top: 26.0),
          decoration: ShapeDecoration(
              color: Colors.white,
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.all(Radius.circular(radius)),
              )),
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[
              //标题
              Padding(
                padding: EdgeInsets.fromLTRB(16.0, 0.0, 16.0, 20.0),
                child: Text(
                  title,
                  style: TextStyle(
                      color: Colors.black87,
                      fontSize: 18.0,
                      fontWeight: FontWeight.bold),
                ),
              ),

              //message信息
              Padding(
                padding: EdgeInsets.fromLTRB(20.0, 0.0, 20.0, 20.0),
                child: Text(
                  message,
                  textAlign: TextAlign.center,
                  style: TextStyle(color: Colors.black54, fontSize: 16.0),
                ),
              ),

              //分割线
              Container(
                color: Colors.grey,
                width: double.infinity,
                height: 0.5,
              ),

              //按钮
              SizedBox(
                width: 300.0,
                height: 50.0,
                child: Row(
                  children: <Widget>[
                    //左侧按钮（可能不存在）
                    leftBtnText != null
                        ? Expanded(
                            flex: 1,
                            child: Material(
                              borderRadius: BorderRadius.only(bottomLeft: Radius.circular(radius)),
                              color: Colors.white,
                              child: InkWell(
                                onTap: leftCallback == null
                                    ? () {
                                        Navigator.pop(context);
                                      }
                                    : leftCallback,
                                child: Center(
                                  child: Text(
                                    leftBtnText,
                                    style: TextStyle(
                                        color: Colors.black54, fontSize: 16.0),
                                  ),
                                ),
                              ),
                            ),
                          )
                        : null,

                    //按钮之间的分割线
                    leftBtnText != null
                        ? Container(
                            height: double.infinity,
                            width: 0.5,
                            color: Colors.grey,
                          )
                        : null,

                    //右侧按钮（必定存在）
                    Expanded(
                      flex: 1,
                      child: Material(
                        borderRadius: BorderRadius.only(bottomRight: Radius.circular(radius)),
                        color: Colors.white,
                        child: InkWell(
                          onTap: rightCallback == null
                              ? () {
                                  Navigator.pop(context);
                                }
                              : rightCallback,
                          child: Center(
                            child: Text(
                              rightBtnText,
                              style: TextStyle(
                                  color: Theme.of(context).primaryColor,
                                  fontSize: 16.0),
                            ),
                          ),
                        ),
                      ),
                    ),
                  ].where(notNull).toList(),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}




Tags
flutter