Flutter对话框管理插件app_dialog的使用

Flutter对话框管理插件app_dialog的使用

app_dialog

A new Flutter package project for simple and app dialogs

使用方法

要使用此插件，只需在 pubspec.yaml 文件中添加 app_dialog 作为依赖项，并在文件中导入以下内容：

import 'package:app_dialog/app_dialog.dart';

示例图片

示例图片

示例代码

以下是一个简单的示例代码，展示如何使用 app_dialog 插件创建一个对话框：

AppDialog(
  context: context, // 上下文对象
  dialogType: DialogType.INFO, // 对话框类型
  animType: AnimType.BOTTOMSLIDE, // 动画类型
  title: 'Dialog Title', // 标题
  desc: 'Dialog description here.............', // 描述
  btnCancelOnPress: () {}, // 取消按钮点击事件
  btnOkOnPress: () {}, // 确定按钮点击事件
)..show(); // 显示对话框

自定义对话框主体

如果设置了 body 属性，则会忽略 title 和 desc，这允许进一步自定义对话框。

AppDialog(
  context: context,
  animType: AnimType.SCALE, // 动画类型
  dialogType: DialogType.INFO, // 对话框类型
  body: Center(
    child: Text(
      'If the body is specified, then title and description will be ignored, this allows to further customize the dialogue.',
      style: TextStyle(fontStyle: FontStyle.italic),
    ),
  ), // 自定义对话框主体
  title: 'This is Ignored', // 忽略的标题
  desc: 'This is also Ignored', // 忽略的描述
  btnOkOnPress: () {}, // 确定按钮点击事件
)..show(); // 显示对话框

自定义按钮

可以通过设置 btnOk 或 btnCancel 来使用自定义按钮，所有文本参数、图标等将被忽略。

消失和回调

通过 onDissmissCallback() 可以设置消失时的回调函数，并且可以随时通过 dismiss() 方法关闭对话框。

AppDialog 类属性表

以下是 AppDialog 类的主要属性及其说明：

Dart 属性 数据类型 描述 默认值
dialogType DialogType 设置对话框类型，例如 DialogType.INFO，创建带动画的头部。 Null
customHeader Widget 创建自定义头部（如果设置则忽略 DialogType）。 Null
width double 对话框的最大宽度，尤其在网页或横屏模式下非常有用。 MediaQuery.of(context).size.width
title String 设置对话框的标题。 Null
desc String 设置对话框的描述文字。 Null
body Widget 创建自定义的对话框主体，如果设置了此属性，则忽略 title 和 desc。 Null
context BuildContext 上下文对象，必须设置。 Null
btnOkText String 确定按钮的文字。 'Ok'
btnOkIcon IconData 确定按钮的图标。 Null
btnOkOnPress Function 处理确定按钮点击事件的函数，对话框的关闭由内部处理。 Null
btnOkColor Color 确定按钮的颜色。 Color(0xFF00CA71)
btnCancelText String 取消按钮的文字。 'Cancel'
btnCancelIcon IconData 取消按钮的图标。 Null
btnCancelOnPress Function 处理取消按钮点击事件的函数，对话框的关闭由内部处理。 Null
btnCancelColor Color 取消按钮的颜色。 Colors.red
buttonsBorderRadius BorderRadiusGeometry 自定义按钮的圆角。 BorderRadius.all(Radius.circular(100))
dismissOnTouchOutside bool 点击外部是否关闭对话框。 true
onDissmissCallback Function 对话框消失时的回调函数。 Null
animType AnimType 对话框进入动画的类型。 AnimType.SCALE
aligment AlignmentGeometry 对话框对齐方式。 Alignment.center
useRootNavigator bool 是否使用根导航器代替本地导航器。 false
headerAnimationLoop bool 控制头部动画循环。 true
padding EdgeInsetsGeometry 对话框元素的内边距。 EdgeInsets.only(left: 5, right: 5)
autoHide Duration 隐藏对话框的时间间隔。 null
keyboardAware bool 控制是否添加 Padding EdgeInsets.only(bottom: MediaQuery.of(context).viewInsets.bottom)。 true
dismissOnBackKeyPress bool 控制是否可以通过返回键关闭对话框。 true
buttonsBorderRadius BorderRadiusGeometry 内置按钮的圆角。 BorderRadius.all(Radius.circular(100))
buttonsTextStyle TextStyle 内置按钮的文本样式。 TextStyle(color: Colors.white, fontWeight: FontWeight.w700, fontSize: 14)
showCloseIcon bool 控制是否显示关闭图标。 false
closeIcon Widget 自定义关闭图标。 null
dialogBackgroundColor Color 自定义整个对话框的背景颜色。 Theme.of(context).cardColor
borderSide BorderSide 启用整个对话框形状的边框。 null

完整示例代码

以下是一个完整的示例代码，展示如何使用 app_dialog 插件创建多种类型的对话框：

import 'package:app_dialog/app_dialog.dart';
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Fancy Dialog Example',
      theme: ThemeData.dark(),
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  [@override](/user/override)
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('App Dialog Example'),
      ),
      body: Center(
        child: Container(
          padding: EdgeInsets.all(16),
          child: SingleChildScrollView(
            child: Column(
              children: [
                ElevatedButton(
                  onPressed: () {
                    AppDialog(
                      context: context,
                      dialogType: DialogType.INFO,
                      animType: AnimType.BOTTOM_SLIDE,
                      title: 'INFO',
                      desc: 'Dialog description here...',
                      showCloseIcon: true,
                      btnCancelOnPress: () {},
                      btnOkOnPress: () {},
                    )..show();
                  },
                  child: Text('Info Dialog'),
                ),
                SizedBox(height: 16),
                ElevatedButton(
                  onPressed: () {
                    AppDialog(
                      context: context,
                      dialogType: DialogType.QUESTION,
                      headerAnimationLoop: false,
                      animType: AnimType.BOTTOM_SLIDE,
                      title: 'Question',
                      desc: 'Dialog description here...',
                      buttonsTextStyle: TextStyle(color: Colors.black),
                      showCloseIcon: true,
                      btnCancelOnPress: () {},
                      btnOkOnPress: () {},
                    )..show();
                  },
                  child: Text('Question Dialog'),
                ),
                SizedBox(height: 16),
                ElevatedButton(
                  onPressed: () {
                    AppDialog(
                      context: context,
                      headerAnimationLoop: true,
                      animType: AnimType.BOTTOM_SLIDE,
                      title: 'INFO',
                      desc:
                          'Lorem ipsum dolor sit amet consectetur adipiscing elit eget ornare tempus, vestibulum sagittis rhoncus felis hendrerit lectus ultricies duis vel, id morbi cum ultrices tellus metus dis ut donec. Ut sagittis viverra venenatis eget euismod faucibus odio ligula phasellus,',
                    )..show();
                  },
                  child: Text('Info Dialog Without Buttons'),
                ),
                SizedBox(height: 16),
                ElevatedButton(
                  onPressed: () {
                    AppDialog(
                      context: context,
                      dialogType: DialogType.WARNING,
                      headerAnimationLoop: false,
                      animType: AnimType.TOP_SLIDE,
                      showCloseIcon: true,
                      closeIcon: Icon(Icons.close_fullscreen_outlined),
                      title: 'Warning',
                      desc:
                          'Dialog description here..................................................',
                      btnCancelOnPress: () {},
                      btnOkOnPress: () {},
                    )..show();
                  },
                  child: Text('Warning Dialog'),
                ),
                SizedBox(height: 16),
                ElevatedButton(
                  onPressed: () {
                    AppDialog(
                      context: context,
                      dialogType: DialogType.ERROR,
                      animType: AnimType.RIGHT_SLIDE,
                      headerAnimationLoop: false,
                      title: 'Error',
                      desc:
                          'Dialog description here..................................................',
                      btnOkOnPress: () {},
                      btnOkIcon: Icons.cancel,
                      btnOkColor: Colors.red,
                    )..show();
                  },
                  child: Text('Error Dialog'),
                ),
                SizedBox(height: 16),
                ElevatedButton(
                  onPressed: () {
                    AppDialog(
                      context: context,
                      dialogType: DialogType.SUCCESS,
                      animType: AnimType.LEFT_SLIDE,
                      headerAnimationLoop: false,
                      title: 'Success',
                      desc:
                          'Dialog description here..................................................',
                      btnOkOnPress: () {
                        debugPrint('OnClcik');
                      },
                      btnOkIcon: Icons.check_circle,
                      onDismissCallback: () {
                        debugPrint('Dialog Dismiss from callback');
                      },
                    )..show();
                  },
                  child: Text('Success Dialog'),
                ),
                SizedBox(height: 16),
                ElevatedButton(
                  onPressed: () {
                    AppDialog(
                      context: context,
                      headerAnimationLoop: false,
                      dialogType: DialogType.NO_HEADER,
                      title: 'No Header',
                      desc:
                          'Dialog description here..................................................',
                      btnOkOnPress: () {
                        debugPrint('OnClick');
                      },
                      btnOkIcon: Icons.check_circle,
                    )..show();
                  },
                  child: Text('No Header Dialog'),
                ),
                SizedBox(height: 16),
                ElevatedButton(
                  onPressed: () {
                    AppDialog(
                      context: context,
                      animType: AnimType.SCALE,
                      dialogType: DialogType.INFO,
                      body: Center(
                        child: Text(
                          'If the body is specified, then title and description will be ignored, this allows to further customize the dialogue.',
                          style: TextStyle(fontStyle: FontStyle.italic),
                        ),
                      ),
                      title: 'This is Ignored',
                      desc: 'This is also Ignored',
                    )..show();
                  },
                  child: Text('Custom Body Dialog'),
                ),
                SizedBox(height: 16),
                ElevatedButton(
                  onPressed: () {
                    AppDialog(
                      context: context,
                      animType: AnimType.SMOOTH_SCALE,
                      animDuration: Duration(milliseconds: 270),
                      dialogType: DialogType.NO_HEADER,
                      body: Container(
                        height: 120.0,
                        child: Column(
                          children: [
                            Container(width: 20.0, height: 2.0, color: Colors.white),
                            Spacer(),
                            Row(
                              children: [
                                Container(width: 2.0, height: 20.0, color: Colors.white),
                                Spacer(),
                                Container(
                                  width: 300.0,
                                  padding: EdgeInsets.all(8.0),
                                  child: Text(
                                    'The body takes all of the dialog space',
                                    textAlign: TextAlign.center,
                                    style: TextStyle(fontStyle: FontStyle.italic),
                                  ),
                                ),
                                Spacer(),
                                Container(width: 2.0, height: 20.0, color: Colors.white),
                              ],
                            ),
                            Spacer(),
                            Container(width: 20.0, height: 2.0, color: Colors.white),
                          ],
                        ),
                      ),
                      title: 'This is Ignored',
                      desc: 'This is also Ignored',
                      noVerticalMargin: true,
                      padding: EdgeInsets.zero,
                    )..show();
                  },
                  child: Text('No Vertical Margin Dialog'),
                ),
                SizedBox(height: 16),
                ElevatedButton(
                  onPressed: () {
                    AppDialog(
                      context: context,
                      dialogType: DialogType.INFO,
                      animType: AnimType.SCALE,
                      title: 'Auto Hide Dialog',
                      desc: 'AutoHide after 2 seconds',
                      autoHide: Duration(seconds: 2),
                    )..show();
                  },
                  child: Text('Auto Hide Dialog'),
                ),
                SizedBox(height: 16),
                ElevatedButton(
                  onPressed: () {
                    AppDialog(
                      context: context,
                      keyboardAware: true,
                      dismissOnBackKeyPress: false,
                      dialogType: DialogType.WARNING,
                      animType: AnimType.BOTTOM_SLIDE,
                      btnCancelText: "Cancel Order",
                      btnOkText: "Yes, I will pay",
                      title: 'Continue to pay?',
                      padding: const EdgeInsets.all(16.0),
                      desc:
                          'Please confirm that you will pay 3000 INR within 30 mins. Creating orders without paying will create penalty charges, and your account may be disabled.',
                      btnCancelOnPress: () {},
                      btnOkOnPress: () {},
                    ).show();
                  },
                  child: Text('Testing Dialog'),
                ),
                SizedBox(height: 16),
                ElevatedButton(
                  onPressed: () {
                    AppDialog dialog;
                    dialog = AppDialog(
                      context: context,
                      animType: AnimType.SCALE,
                      dialogType: DialogType.INFO,
                      keyboardAware: true,
                      body: Padding(
                        padding: const EdgeInsets.all(8.0),
                        child: Column(
                          children: [
                            Text(
                              'Form Data',
                              style: Theme.of(context).textTheme.headline6,
                            ),
                            SizedBox(height: 10),
                            Material(
                              elevation: 0,
                              color: Colors.blueGrey.withAlpha(40),
                              child: TextFormField(
                                autofocus: true,
                                minLines: 1,
                                decoration: InputDecoration(
                                  border: InputBorder.none,
                                  labelText: 'Title',
                                  prefixIcon: Icon(Icons.text_fields),
                                ),
                              ),
                            ),
                            SizedBox(height: 10),
                            Material(
                              elevation: 0,
                              color: Colors.blueGrey.withAlpha(40),
                              child: TextFormField(
                                autofocus: true,
                                keyboardType: TextInputType.multiline,
                                maxLengthEnforced: true,
                                minLines: 2,
                                maxLines: null,
                                decoration: InputDecoration(
                                  border: InputBorder.none,
                                  labelText: 'Description',
                                  prefixIcon: Icon(Icons.text_fields),
                                ),
                              ),
                            ),
                            SizedBox(height: 10),
                            ElevatedButton(
                              onPressed: () {
                                dialog.dismiss();
                              },
                              child: Text('Close'),
                            ),
                          ],
                        ),
                      ),
                    )..show();
                  },
                  child: Text('Body with Input'),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

更多关于Flutter对话框管理插件app_dialog的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter对话框管理插件app_dialog的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


app_dialog 是一个用于简化 Flutter 应用中对话框管理的插件。它提供了一种简单的方式来显示和管理不同类型的对话框，如 AlertDialog、SimpleDialog、BottomSheet 等。以下是如何使用 app_dialog 插件的基本步骤：

1. 添加依赖

首先，你需要在 pubspec.yaml 文件中添加 app_dialog 插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  app_dialog: ^1.0.0  # 请检查最新版本

然后运行 flutter pub get 来安装依赖。

2. 导入插件

在你的 Dart 文件中导入 app_dialog 插件：

import 'package:app_dialog/app_dialog.dart';

3. 使用 AppDialog

AppDialog 提供了多种方法来显示不同类型的对话框。以下是一些常见的使用示例：

显示 AlertDialog

AppDialog.alert(
  context: context,
  title: '提示',
  content: '这是一个简单的提示对话框',
  confirmText: '确定',
  onConfirm: () {
    print('用户点击了确定');
  },
);

显示 ConfirmDialog

AppDialog.confirm(
  context: context,
  title: '确认',
  content: '你确定要执行此操作吗？',
  confirmText: '确定',
  cancelText: '取消',
  onConfirm: () {
    print('用户点击了确定');
  },
  onCancel: () {
    print('用户点击了取消');
  },
);

显示 BottomSheet

AppDialog.bottomSheet(
  context: context,
  child: Container(
    height: 200,
    child: Center(
      child: Text('这是一个底部弹窗'),
    ),
  ),
);

显示自定义对话框

AppDialog.custom(
  context: context,
  builder: (BuildContext context) {
    return AlertDialog(
      title: Text('自定义对话框'),
      content: Text('这是一个自定义的对话框'),
      actions: <Widget>[
        TextButton(
          onPressed: () {
            Navigator.of(context).pop();
          },
          child: Text('关闭'),
        ),
      ],
    );
  },
);

4. 高级用法

AppDialog 还支持一些高级功能，如设置对话框的样式、动画、背景颜色等。你可以通过传递额外的参数来自定义对话框的外观和行为。

例如，设置对话框的背景颜色：

AppDialog.alert(
  context: context,
  title: '提示',
  content: '这是一个带背景颜色的提示对话框',
  backgroundColor: Colors.blue,
  confirmText: '确定',
  onConfirm: () {
    print('用户点击了确定');
  },
);
回到顶部