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

简介

这是一个带有自定义选项的简单警报对话框插件。它可以帮助解决Flutter中警报框大小的问题，并提供更大的尺寸和流畅的动画效果。

功能

• 自定义背景颜色：可以设置对话框的背景颜色。
• 阴影高度：通过elevation属性调整对话框的阴影高度。
• 插入动画持续时间：通过insetAnimationDuration属性控制对话框的插入动画时长。
• 插入动画曲线：通过insetAnimationCurve属性设置对话框的插入动画曲线。
• 对话框形状：可以通过shape属性定义对话框的形状。
• 子部件：通过child属性指定对话框的内容。

开始使用

在项目的pubspec.yaml文件中添加以下依赖项：

dependencies:
  fluttercustomdialogcontainer: ^1.0.0

然后运行以下命令以获取依赖项：

flutter pub get

使用示例

以下是一个完整的示例代码，展示如何使用fluttercustomdialogcontainer插件创建一个自定义对话框：

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Custom Dialog Example'),
        ),
        body: Center(
          child: ElevatedButton(
            onPressed: () {
              // 显示自定义对话框
              showDialog(
                context: context,
                builder: (BuildContext context) {
                  return CustomDialogContainer(
                    // 设置背景颜色
                    backgroundColor: Colors.white,
                    // 设置阴影高度
                    elevation: 10.0,
                    // 设置插入动画时长
                    insetAnimationDuration: Duration(milliseconds: 500),
                    // 设置插入动画曲线
                    insetAnimationCurve: Curves.easeInOut,
                    // 设置对话框形状
                    shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(10.0),
                    ),
                    // 设置对话框内容
                    child: Container(
                      padding: EdgeInsets.all(20.0),
                      child: Column(
                        mainAxisSize: MainAxisSize.min,
                        children: [
                          Text(
                            '自定义对话框',
                            style: TextStyle(fontSize: 20.0),
                          ),
                          SizedBox(height: 20.0),
                          Text(
                            '这是一个带有自定义选项的对话框示例。',
                            textAlign: TextAlign.center,
                          ),
                          SizedBox(height: 20.0),
                          ElevatedButton(
                            onPressed: () {
                              Navigator.of(context).pop(); // 关闭对话框
                            },
                            child: Text('关闭'),
                          )
                        ],
                      ),
                    ),
                  );
                },
              );
            },
            child: Text('显示自定义对话框'),
          ),
        ),
      ),
    );
  }
}

代码说明

1. 导入插件：

   import 'package:fluttercustomdialogcontainer/fluttercustomdialogcontainer.dart';
   

   导入fluttercustomdialogcontainer插件。

2. 定义对话框内容： 在showDialog方法中，使用CustomDialogContainer构建自定义对话框。

3. 设置背景颜色：

   backgroundColor: Colors.white,
   

4. 设置阴影高度：

   elevation: 10.0,
   

5. 设置插入动画时长：

   insetAnimationDuration: Duration(milliseconds: 500),
   

6. 设置插入动画曲线：

   insetAnimationCurve: Curves.easeInOut,
   

7. 设置对话框形状：

   shape: RoundedRectangleBorder(
     borderRadius: BorderRadius.circular(10.0),
   ),
   

8. 设置对话框内容：

   child: Container(
     padding: EdgeInsets.all(20.0),
     child: Column(
       mainAxisSize: MainAxisSize.min,
       children: [
         Text(
           '自定义对话框',
           style: TextStyle(fontSize: 20.0),
         ),
         SizedBox(height: 20.0),
         Text(
           '这是一个带有自定义选项的对话框示例。',
           textAlign: TextAlign.center,
         ),
         SizedBox(height: 20.0),
         ElevatedButton(
           onPressed: () {
             Navigator.of(context).pop(); // 关闭对话框
           },
           child: Text('关闭'),
         )
       ],
     ),
   ),