Flutter - 自定義Dialog彈窗

Flutter - 自定義Dialog彈窗

應用場景：app系統版本升級彈窗，系統退出登錄彈窗，首頁廣告彈窗，消息中心彈窗，刪除文件彈窗等等各種應用場景中，我們開發中都會遇到此情形。

廢話不多話，先看效果圖如下：（以上場景中代碼邏輯都差不多，源代碼自行修改即可！！！）------這裏僅展示退出登錄場景

邏輯其實很簡單，重寫Dialog類即可。

邏輯代碼如下：

import 'package:flutter/material.dart';

class DialogWidget extends Dialog {
    final String title; //標題
    final String content; //內容
    final String cancelText; //是否需要"取消"按鈕
    final String confirmText; //是否需要"確定"按鈕
    final Function cancelFun; //取消回調
    final Function confirmFun; //確定回調


    DialogWidget({
        Key key,
        @required this.title,
        @required this.content,
        this.cancelText,
        this.confirmText,
        @required this.cancelFun,
        this.confirmFun
    }) : super(key: key);

    @override
    Widget build(BuildContext context) {
        return Padding(
            padding: EdgeInsets.all(15),
            child: Material(
                type: MaterialType.transparency,
                child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                        Container(
                            decoration: ShapeDecoration(
                                color: Color(0xfff2f2f2),
                                shape: RoundedRectangleBorder(
                                    borderRadius: BorderRadius.all(
                                        Radius.circular(10),
                                    ),
                                ),
                            ),
                            margin: EdgeInsets.all(15),
                            child: Column(
                                children: <Widget>[
                                    Padding(
                                        padding: EdgeInsets.all(10),
                                        child: Center(
                                            child:  Text(title, style: TextStyle(color: Color(0xff666666))),
                                        ),
                                    ),
                                    Container(
                                        color: Color(0xffffffff),
                                        height: 1.0,
                                    ),
                                    Container(
                                        constraints: BoxConstraints(minHeight: 100),
                                        child: Padding(
                                            padding: const EdgeInsets.all(12.0),
                                            child: IntrinsicHeight(
                                                child:  Text(title, style: TextStyle(color: Color(0xff666666))),
                                            ),
                                        ),
                                    ),
                                    Container(
                                        color: Color(0xffeeeeee),
                                        height: 1.0,
                                    ),
                                    this._buildBottomButtonGroup()
                                ],
                            ),
                        )
                    ],
                ),
            ),
        );
    }

    Widget _buildBottomButtonGroup() {
        var widgets = <Widget>[];
        if (cancelText != null && cancelText.isNotEmpty) widgets.add(_buildBottomCancelButton());
        if (confirmText != null && confirmText.isNotEmpty && confirmText != null && confirmText.isNotEmpty) widgets.add(_buildBottomOnline());
        if (confirmText != null && confirmText.isNotEmpty) widgets.add(_buildBottomPositiveButton());
        
        return Flex(
            direction: Axis.horizontal,
            children: widgets,
        );
    }

    Widget _buildBottomOnline() {
        return Container(
            color: Color(0xffeeeeee),
            height: 38,
            width: 1,
        );
    }

    Widget _buildBottomCancelButton() {
        return Flexible(
            fit: FlexFit.tight,
            child: FlatButton(
                onPressed: this.cancelFun,
                child:  Text(title, style: TextStyle(color: Color(0xff666666))),
            ),
        );
    }

    Widget _buildBottomPositiveButton() {
        return Flexible(
            fit: FlexFit.tight,
            child: FlatButton(
                onPressed: this.confirmFun,
                child:  Text(title, style: TextStyle(color: Color(0xff666666))),
            ),
        );
    }
}

代碼中實際的效果可能與上面附圖可能不一樣， 但是邏輯是一樣的。（如背景顏色字體等等，自行配置）

下面該如何使用調用呢？

點擊"退出登錄"按鈕：

FlatButton(
  child: Text("退出登錄"),
  onPressed: logOut, //退出登錄方法
)

　　

方法：

// 退出登錄
    void logOut(){
        showDialog(
            context: context,
            barrierDismissible: false,
            builder: (BuildContext context){
                return DialogWidget(
                    title: '提示', 
                    content: '確定要退出嗎?',
                    cancelText: '取消',
                    confirmText: '確定',
                    cancelFun: (){
                        Navigator.pop(context);
                    },
                    confirmFun: (){
                        Navigator.pop(context);
                        Navigator.pop(context);
                        Provider.of<UserModel>(context).clearUserInfo();
                    },
                );
            }
        );
    }

到這裏基本結束了，希望大家學以致用，舉一反三！！！

 

 

 

 

------------恢復內容結束------------