Flutter现代化对话框插件modern_dialog的使用

modern_dialog 是一个用于Flutter应用程序的现代化自定义对话框插件，它具有简单实现、适应Android和iOS平台、多种现成布局以及完全自定义的特点。

🎯 特性

• 简单实现
• 适应Android & iOS
• 各种现成可用的布局
• 完全自定义

📦 使用

Standard Dialog 标准对话框

标准对话框是最基本的一种对话框，通常包含标题、内容和一个确认按钮。以下是创建标准对话框的示例：

ModernDialog.showStandard(
    context,
    title: "Title",
    content: const Text("description"),
    buttonTitle: "Save",
    onAccept: () => print("do sometime"),
);

更多自定义选项

你可以通过添加更多参数来自定义标准对话框：

ModernDialog.showStandard(
    context,
    icon: const Icon(Icons.phone_android),
    mainButtonColor: Colors.blue,
    cancelButtonColor: Colors.red,
    onCancel: (){},
    cancelButtonTitle: "",
    dismissibleDialog: true,
    backgroundColor: Colors.orange,
    disableTintColor: true,
    shouldCloseOnMainButton: true,
    title: "Title",
    content: const Text("description"),
    buttonTitle: "Save",
    onAccept: () => print("do sometime"),
);

Info Dialog 提示对话框

提示对话框是一种只有同意按钮的对话框，适用于提供信息或提示。以下是如何创建提示对话框的示例：

ModernDialog.showInfo(
    context,
    content: const Text("You need to know this!"),
);

更多自定义选项

你可以通过添加更多参数来自定义提示对话框：

ModernDialog.showInfo(
    context,
    title: "Title",
    buttonTitle: "Save",
    mainButtonColor: Colors.red,
    dismissibleDialog: true,
    backgroundColor: Colors.grey,
    disableTintColor: true,
    content: const Text("You need to know this!"),
);

Trailing Action Dialog 带尾随动作的对话框

当需要一个带有两个重要操作按钮的对话框时，可以使用带尾随动作的对话框。以下是如何创建带尾随动作的对话框的示例：

ModernDialog.showTrailingAction(
    context,
    content: const Text("This a dialog showing a trailing action button"),
    buttonTitle: 'Save',
    onAccept: () => print("do sometime"),
    trailingButtonTitle: "Open Settings",
    onTrailingPressed: () => print("do sometime"),
);

更多自定义选项

你可以通过添加更多参数来自定义带尾随动作的对话框：

ModernDialog.showTrailingAction(
    context,
    title: "Title",
    mainButtonColor: Colors.red,
    trailingButtonColor: Colors.red,
    dismissibleDialog: true,
    backgroundColor: Colors.grey,
    disableTintColor: true,
    content: const Text("This a dialog showing a trailing action button"),
    buttonTitle: 'Save',
    onAccept: () => print("do sometime"),
    trailingButtonTitle: "Open Settings",
    onTrailingPressed: () => print("do sometime"),
);

Vertical Dialog 垂直对话框

垂直对话框是按钮垂直排列的对话框。你可以通过DialogButton类来添加自定义按钮。以下是如何创建垂直对话框的示例：

ModernDialog.showVerticalDialog(
    context,
    content: const Text("description"),
    buttons: [
      DialogButton(
        title: "Discard",
        onPressed: () => print("do sometime"),
        color: Colors.red,
      ),
      DialogButton(
        title: "Allow all changes",
        onPressed: () => print("do sometime"),
      ),
    ],
);

更多自定义选项

你可以通过添加更多参数来自定义垂直对话框：

ModernDialog.showVerticalDialog(
    context,
    icon: const Icon(Icons.ac_unit),
    title: "Title",
    dismissibleDialog: true,
    backgroundColor: Colors.grey,
    disableTintColor: true,
    content: const Text("description"),
    buttons: [
      DialogButton(
        title: "Discard",
        onPressed: () => print("do sometime"),
        color: Colors.red,
      ),
      DialogButton(
        title: "Allow all changes",
        onPressed: () => print("do sometime"),
      ),
    ],
);

Custom Dialog 自定义对话框

自定义对话框允许你添加任何自定义的小部件。以下是如何创建自定义对话框的示例：

ModernDialog.showCustom(
    context,
    view: const Text("Add any view you would like"),
);

更多自定义选项

你可以通过添加更多参数来自定义自定义对话框：

ModernDialog.showCustom(
    context,
    borderRadius: 70,
    disablePadding: true,
    dismissibleDialog: true,
    backgroundColor: Colors.grey,
    disableTintColor: true,
    view: const Text("Add any view you would like"),
);

🧱 参数说明

Vertical Dialog 参数

Trailing Dialog 参数

Custom Dialog 参数

示例代码

以下是完整的示例代码，展示了如何在Flutter应用程序中使用modern_dialog插件：

import 'package:flutter/material.dart';
import 'package:modern_dialog/dialogs/vertical.dart';
import 'package:modern_dialog/modern_dialog.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        useMaterial3: true,
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
      ),
      home: const HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: const Text("Modern Dialog"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: () {
                ModernDialog.showStandard(
                  context,
                  title: "Title",
                  content: const Text("description"),
                  buttonTitle: "Save",
                  onAccept: () => print("do sometime"),
                );
              },
              child: const Text("Standard Dialog"),
            ),
            const SizedBox(height: 24),
            ElevatedButton(
              onPressed: () {
                ModernDialog.showInfo(
                  context,
                  content: const Text("You need to know this!"),
                );
              },
              child: const Text("Info Dialog"),
            ),
            const SizedBox(height: 24),
            ElevatedButton(
              onPressed: () {
                ModernDialog.showTrailingAction(
                  context,
                  content: const Text("This a dialog showing a trailing action button"),
                  buttonTitle: 'Save',
                  onAccept: () => print("do sometime"),
                  trailingButtonTitle: "Open Settings",
                  onTrailingPressed: () => print("do sometime"),
                );
              },
              child: const Text("Trailing Action Dialog"),
            ),
            const SizedBox(height: 24),
            ElevatedButton(
              onPressed: () {
                ModernDialog.showVerticalDialog(
                  context,
                  content: const Text("Here you can add buttons horizontally"),
                  buttons: [
                    DialogButton(
                      title: "Discard",
                      onPressed: () => print("do sometime"),
                      color: Colors.red,
                    ),
                    DialogButton(
                      title: "Allow all changes",
                      onPressed: () => print("do sometime"),
                    ),
                  ],
                );
              },
              child: const Text("Vertical Dialog"),
            ),
            const SizedBox(height: 24),
            ElevatedButton(
              onPressed: () {
                ModernDialog.showCustom(
                  context,
                  view: const Text("Add any view you would like"),
                );
              },
              child: const Text("Custom Dialog"),
            ),
          ],
        ),
      ),
    );
  }
}

通过以上代码和说明，你应该能够轻松地在Flutter项目中集成并使用modern_dialog插件来创建各种类型的现代化对话框。