Flutter自定义对话框插件flutter_custom_dialog的使用

✨ flutter_custom_dialog

[语言 ~~] 中文文档

全局对话框功能封装，以语义化的方式填充对话框内的内容，当前提供的功能包括：

1. 支持几个语义组件方法来填充对话框内的组件内容
2. 支持自定义语义组件，供开发者自由填充对话框内的组件内容
3. 支持设置对话框背景色、前景色、位置、动画、点击外部消失等功能，详见下文
4. 支持无Context调用对话框，详见下文

🎖 安装

1、安装

dependencies:
  flutter_custom_dialog: ^1.2.0

2、导入

import 'package:flutter_custom_dialog/flutter_custom_dialog.dart';

🎖 示例

dialog_demo

分割线	主体	头部与主体	列表项	列表单选按钮

进度条	进度条与主体	底部表单	通知	弹出菜单

dialog_gravity

底部	顶部	左侧	右侧	中心

左下角	左上角	右下角	右上角

dialog_animation

缩放进入	淡入	旋转进入	自定义动画

⚡ 对话框属性

对话框属性可以通过成员变量的方法调用设置，详细信息如下表所示：

YYDialog YYNoticeDialog() {
  return YYDialog().build()
    ..width = 120
    ..height = 110
    ..backgroundColor = Colors.black.withOpacity(0.8)
    ..borderRadius = 10.0
    ..showCallBack = () {
      print("showCallBack invoke");
    }
    ..dismissCallBack = () {
      print("dismissCallBack invoke");
    }
    ..widget(Padding(
      padding: EdgeInsets.only(top: 21),
      child: Image.asset(
        'images/success.png',
        width: 38,
        height: 38,
      ),
    ))
    ..widget(Padding(
      padding: EdgeInsets.only(top: 10),
      child: Text(
        "Success",
        style: TextStyle(
          fontSize: 15,
          color: Colors.white,
        ),
      ),
    ))
    ..animatedFunc = (child, animation) {
      return ScaleTransition(
        child: child,
        scale: Tween(begin: 0.0, end: 1.0).animate(animation),
      );
    }
    ..show();
}

支持的属性

注意：

• 设置gravity后，如果需要动画，则应将gravityAnimationEnable设为true。
• 如果设置了decoration属性，则backgroundColor和borderRadius不起作用；它们互斥。

支持的方法

⚡ 语义化组件

对话框内部组件的内容由提前封装好的语义函数快速构建对话框，如以下表格所示：

YYDialog YYAlertDialogWithDivider(BuildContext context) {
  return YYDialog().build(context)
    ..width = 220
    ..borderRadius = 4.0
    ..text(
      padding: EdgeInsets.all(25.0),
      alignment: Alignment.center,
      text: "确定要退出登录吗?",
      color: Colors.black,
      fontSize: 14.0,
      fontWeight: FontWeight.w500,
    )
    ..divider()
    ..doubleButton(
      padding: EdgeInsets.only(top: 10.0),
      gravity: Gravity.center,
      withDivider: true,
      text1: "取消",
      color1: Colors.redAccent,
      fontSize1: 14.0,
      fontWeight1: FontWeight.bold,
      onTap1: () {
        print("取消");
      },
      text2: "确定",
      color2: Colors.redAccent,
      fontSize2: 14.0,
      fontWeight2: FontWeight.bold,
      onTap2: () {
        print("确定");
      },
    )
    ..show();
}

支持的语义组件

⚡ 自定义组件

自定义对话框内部组件内容

• 由于现有的语义组件仅辅助快速UI构建，远远不能满足实际项目开发的需求
• 因此提供了将自定义语义组件插入对话框的能力

YYDialog YYDialogDemo(BuildContext context) {
  return YYDialog().build(context)
    ..width = 220
    ..height = 500
    ..widget(
      Padding(
        padding: EdgeInsets.all(0.0),
        child: Align(
          alignment: Alignment.centerLeft,
          child: Text(
            "",
            style: TextStyle(
              color: Colors.black,
              fontSize: 14.0,
              fontWeight: FontWeight.w100,
            ),
          ),
        ),
      ),
    )
    ..show();
}

⚡ 无Context调用

应用场景

在网络请求返回后，在回调中没有Context引用的情况下，此时需要预先初始化Context，然后可以在没有Context的情况下调用对话框。

1、初始化

在显示对话框之前调用静态方法 <code>YYDialog.init(context);</code>

class AppHome extends StatelessWidget {
  Widget build(BuildContext context) {
    //1、初始化context
    YYDialog.init(context);
    //2、后续使用可以不需要context
    return Scaffold(
      appBar: AppBar(),
      body: SingleChildScrollView(
        child: Column(
          children: <Widget>[
            showAlertDialog(context),
            showDevelopDialog(context),
          ],
        ),
      ),
    );
  }
}

2、使用

直接使用 <code>YYDialog</code>，注意必须调用 <code>build()</code>

YYDialog YYAlertDialogBody() {
  return YYDialog().build()
    ..width = 240
    ..text(
      text: "Hello YYDialog",
      color: Colors.grey[700],
    )
    ..show();
}

🔥🔥 注意事项

1、隐藏对话框

• 不要使用 Navigator.pop(context) 来使弹出层消失，否则会关闭页面
• 这个问题已经在YYDialog内部解决，可以直接调用内部提供的 dismiss() 方法

var yyDialog = YYDialog();
yyDialog?.dismiss();