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

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

为什么使用dialog_handler？

随着应用的增长，你会在应用中实现多个对话框。这时，你需要一种方式来处理、显示和关闭所有类型的对话框和覆盖层。以下是一些使用dialog_handler的理由：

  • 你希望直接从业务层显示对话框，而无需从视图注入上下文。
  • 你不只是希望对话框/覆盖层以普通方式出现，而是希望它们以动画方式出现。
  • 在你关闭一个对话框后，你希望将事务响应返回给调用对话框的对象。
  • 你希望嵌套对话框（在一个对话框中打开另一个对话框）而不会关闭前一个对话框。
  • 你需要在测试期间轻松模拟对话框。
  • 你希望在一段时间后自动关闭对话框。

这些用例可能需要你使用此包。下面你将找到一些可能适合你的需求的例子。

开始使用

注意：最好使用服务定位器注册Dialog Handler的实例，最好是使用GetIt。

安装

运行以下命令：

flutter pub add dialog_handler

这将在你的pubspec.yaml文件中添加如下行（并隐式运行flutter pub get）：

dependencies:
    dialog_handler: ^1.0.0

注册Dialog Handler实例

要使用getIt注册Dialog Handler实例，请参阅以下代码：

import 'package:get_it/get_it.dart';

GetIt locator = GetIt.instance;

locator.registerLazySingleton<DialogHandler>(
    () => DialogHandler.instance,
);

使用Dialog Handler详细说明

假设我有一个要在对话框中显示的小部件：

import 'package:flutter/material.dart';

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Container(
      color: Colors.red,
      height: 300,
      width: double.infinity,
    );
  }
}

要显示包含SampleDialogWidget的对话框，请查看以下代码：

await locator<DialogHandler>().showDialog(
    dialogType: DialogType.modalDialog,
    animationType: AnimationType.fromTopToPosition,
    animationDuration: const Duration(milliseconds: 300),
    widget: const SampleDialogWidget(),
);

dialogType可以是以下之一：

  • bottomSheetDialog
  • modalDialog
  • overlayDialog

animationType可以是以下之一：

  • fadeFromTopToPosition
  • fadeFromBottomToPosition
  • fadeFromLeftToPosition
  • fadeFromRightToPosition
  • scaleToPosition
  • fromRightToPosition
  • fromLeftToPosition
  • fromBottomToPosition
  • fromTopToPosition
  • fromTopToPositionThenBounce
  • fromBottomToPositionThenBounce

animationDuration是一个可选的Duration对象，用于控制动画显示的持续时间。

animationReverseDuration是一个可选的Duration对象，用于控制动画反转的持续时间。

backgroundWidget是一个可选的Widget，它会在任何显示的对话框的背景上显示。这样我们可以创建一个模糊背景的对话框。例如：

await locator<DialogHandler>().showDialog(
  dialogType: DialogType.modalDialog,
  widget: const ModalDialogWithBlurWidget(),
  backgroundWidget: GlassContainer.clearGlass(
    borderWidth: 0,
    blur: 7,
  ),
);

示例代码

以下是一个完整的示例代码，展示了如何使用dialog_handler插件：

import 'package:example/dialog_widgets/bottomsheet_dialog_widget.dart';
import 'package:example/dialog_widgets/error_dialog_widget_example.dart';
import 'package:example/dialog_widgets/modal_dialog_widget.dart';
import 'package:example/extension.dart';
import 'package:flutter/material.dart';
import 'package:dialog_handler/dialog_handler.dart';
import 'package:glass_kit/glass_kit.dart';

import 'dialog_widgets/modal_dialog_with_blur_widget.dart';

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

final GlobalKey<NavigatorState> navigatorKey = GlobalKey<NavigatorState>();

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Dialog Handler',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Dialog Handler Examples'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});
  final String title;
  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return DialogManager(
      child: Scaffold(
        appBar: AppBar(
          title: const Text("Dialog Examples"),
          backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        ),
        body: Container(
          margin: const EdgeInsets.symmetric(horizontal: 20),
          child: SingleChildScrollView(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.start,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                const SizedBox(height: 10),

                const Text(
                  "=============DIALOGS EXAMPLE============",
                  style: TextStyle(color: Colors.blue, fontSize: 14, fontWeight: FontWeight.w600),
                ),
                const SizedBox(height: 10),

                /// BOTTOM SHEET DIALOG EXAMPLE
                ElevatedButton(
                  style: ElevatedButton.styleFrom(backgroundColor: Colors.green),
                  onPressed: () async {
                    await DialogHandler.instance.showDialog(
                      dialogType: DialogType.bottomSheetDialog,
                      widget: InkWell(
                        onTap: () async {
                          await DialogHandler.instance.showDialog(
                            dialogType: DialogType.bottomSheetDialog,
                            widget: Container(
                              height: 200,
                              color: Colors.blue,
                            ),
                          );
                        },
                        child: const BottomSheetDialogWidget(),
                      ),
                    );
                  },
                  child: const Text('Show BottomSheet Dialog', style: TextStyle(color: Colors.white)),
                ),
                const SizedBox(height: 10),

                /// MODAL DIALOG EXAMPLE
                ElevatedButton(
                  style: ElevatedButton.styleFrom(backgroundColor: Colors.green),
                  onPressed: () async {
                    await DialogHandler.instance.showDialog(
                      dialogType: DialogType.modalDialog,
                      widget: const ModalDialogWidget(),
                    );
                  },
                  child: const Text('Show Modal Dialog', style: TextStyle(color: Colors.white)),
                ),
                const SizedBox(height: 10),

                /// MODAL DIALOG WITH BLUR BACKGROUND
                ElevatedButton(
                  style: ElevatedButton.styleFrom(backgroundColor: Colors.green),
                  onPressed: () async {
                    await DialogHandler.instance.showDialog(
                      dialogType: DialogType.modalDialog,
                      widget: const ModalDialogWithBlurWidget(),
                      backgroundWidget: GlassContainer.clearGlass(
                        borderWidth: 0,
                        blur: 7,
                      ),
                    );
                  },
                  child: const Text('Show Modal Dialog With Background', style: TextStyle(color: Colors.white)),
                ),
                const SizedBox(height: 10),

                /// FULLPAGE DIALOG
                ElevatedButton(
                  style: ElevatedButton.styleFrom(backgroundColor: Colors.green),
                  onPressed: () async {
                    await DialogHandler.instance.showDialog(
                      dialogType: DialogType.pageDialog,
                      widget: InkWell(
                        onTap: () {
                          DialogHandler.instance.dismissDialog();
                        },
                        child: Container(
                          color: Colors.red,
                          height: 300,
                          width: double.infinity,
                        ),
                      ).noShadow,
                    );
                  },
                  child: const Text('Show FullPage Dialog', style: TextStyle(color: Colors.white)),
                ),

                const SizedBox(height: 10),
                const Text(
                  "==========DIALOGS WITH ANIMATIONS========",
                  style: TextStyle(color: Colors.red, fontSize: 14, fontWeight: FontWeight.w600),
                ),

                const SizedBox(height: 10),

                /// MODAL DIALOG EXAMPLE WITH ANIMATION: SCALE TO POSITION
                ElevatedButton(
                  style: ElevatedButton.styleFrom(backgroundColor: Colors.green),
                  onPressed: () async {
                    await DialogHandler.instance.showDialog(
                      dialogType: DialogType.modalDialog,
                      animationType: AnimationType.scaleToPosition,
                      animationDuration: const Duration(milliseconds: 300),
                      widget: const ModalDialogWidget(),
                    );
                  },
                  child: const Text('Scale To Position Dialog', style: TextStyle(color: Colors.white)),
                ),
                const SizedBox(height: 10),

                /// MODAL DIALOG EXAMPLE: FROM TOP TO POSITION
                ElevatedButton(
                  style: ElevatedButton.styleFrom(backgroundColor: Colors.green),
                  onPressed: () async {
                    await DialogHandler.instance.showDialog(
                      dialogType: DialogType.modalDialog,
                      animationType: AnimationType.fromTopToPosition,
                      animationDuration: const Duration(milliseconds: 300),
                      widget: const ModalDialogWidget(),
                    );
                  },
                  child: const Text('Dialog from Top To CenterPosition', style: TextStyle(color: Colors.white)),
                ),
                const SizedBox(height: 10),

                /// MODAL DIALOG EXAMPLE: FROM TOP TO POSITION
                ElevatedButton(
                  style: ElevatedButton.styleFrom(backgroundColor: Colors.green),
                  onPressed: () async {
                    await DialogHandler.instance.showDialog(
                      dialogType: DialogType.modalDialog,
                      animationType: AnimationType.fromTopToPosition,
                      dialogAlignment: Alignment.topCenter,
                      animationDuration: const Duration(milliseconds: 300),
                      widget: const ModalDialogWidget(),
                    );
                  },
                  child: const Text('Dialog from Top To TopPosition', style: TextStyle(color: Colors.white)),
                ),
                const SizedBox(height: 10),

                /// MODAL DIALOG EXAMPLE: FROM BOTTOM TO POSITION
                ElevatedButton(
                  style: ElevatedButton.styleFrom(backgroundColor: Colors.green),
                  onPressed: () async {
                    await DialogHandler.instance.showDialog(
                      dialogType: DialogType.modalDialog,
                      animationType: AnimationType.fromBottomToPosition,
                      animationDuration: const Duration(milliseconds: 300),
                      widget: const ModalDialogWidget(),
                    );
                  },
                  child: const Text('Dialog from Bottom To Position', style: TextStyle(color: Colors.white)),
                ),
                const SizedBox(height: 10),

                /// MODAL DIALOG EXAMPLE: FROM LEFT TO POSITION
                ElevatedButton(
                  style: ElevatedButton.styleFrom(backgroundColor: Colors.green),
                  onPressed: () async {
                    await DialogHandler.instance.showDialog(
                      dialogType: DialogType.modalDialog,
                      animationType: AnimationType.fromLeftToPosition,
                      animationDuration: const Duration(milliseconds: 300),
                      widget: const ModalDialogWidget(),
                    );
                  },
                  child: const Text('Dialog from Left To Position', style: TextStyle(color: Colors.white)),
                ),
                const SizedBox(height: 10),

                /// MODAL DIALOG EXAMPLE: FROM RIGHT TO POSITION
                ElevatedButton(
                  style: ElevatedButton.styleFrom(backgroundColor: Colors.green),
                  onPressed: () async {
                    await DialogHandler.instance.showDialog(
                      dialogType: DialogType.modalDialog,
                      animationType: AnimationType.fromRightToPosition,
                      animationDuration: const Duration(milliseconds: 300),
                      widget: const ModalDialogWidget(),
                    );
                  },
                  child: const Text('Dialog from Right To Position', style: TextStyle(color: Colors.white)),
                ),
                const SizedBox(height: 10),
                const Text(
                  "==========ERROR DIALOGS EXAMPLE========",
                  style: TextStyle(color: Colors.red, fontSize: 14, fontWeight: FontWeight.w600),
                ),

                const SizedBox(height: 10),

                /// ERROR DIALOG EXAMPLE
                ElevatedButton(
                  style: ElevatedButton.styleFrom(backgroundColor: Colors.green),
                  onPressed: () async {
                    await DialogHandler.instance.showDialog(
                      dialogType: DialogType.modalDialog,
                      animationType: AnimationType.fromTopToPosition,
                      dialogAlignment: Alignment.topCenter,
                      animationDuration: const Duration(milliseconds: 300),
                      widget: const ErrorDialogWidgetExample(),
                    );
                  },
                  child: const Text('Error Dialog Example', style: TextStyle(color: Colors.white)),
                ),
                const SizedBox(height: 10),

                /// ERROR DIALOG EXAMPLE
                ElevatedButton(
                  style: ElevatedButton.styleFrom(backgroundColor: Colors.green),
                  onPressed: () async {
                    await DialogHandler.instance.showDialog(
                      dialogType: DialogType.modalDialog,
                      animationType: AnimationType.fromTopToPositionThenBounce,
                      dialogAlignment: Alignment.topCenter,
                      animationDuration: const Duration(milliseconds: 1200),
                      animationReverseDuration: const Duration(milliseconds: 550),
                      widget: const ErrorDialogWidgetExample(),
                    );
                  },
                  child: const Text('BOUNCING Error Dialog Example', style: TextStyle(color: Colors.white)),
                ),
                const SizedBox(height: 10),

                /// ERROR DIALOG EXAMPLE
                ElevatedButton(
                  style: ElevatedButton.styleFrom(backgroundColor: Colors.green),
                  onPressed: () async {
                    await DialogHandler.instance.showDialog(
                      dialogType: DialogType.overlayDialog,
                      animationType: AnimationType.fromTopToPositionThenBounce,
                      dialogAlignment: Alignment.topCenter,
                      animationDuration: const Duration(milliseconds: 1200),
                      animationReverseDuration: const Duration(milliseconds: 550),
                      widget: const ErrorDialogWidgetExample(),
                      autoDismissalDuration: const Duration(seconds: 2),
                    );
                  },
                  child: const Text('Interractable Body Dialog Example', style: TextStyle(color: Colors.white)),
                ),
                const SizedBox(height: 10),
                const Text(
                  "====AUTO DISMISSAL DIALOGS EXAMPLE====",
                  style: TextStyle(color: Colors.red, fontSize: 14, fontWeight: FontWeight.w600),
                ),

                const SizedBox(height: 10),

                /// AUTO DISMISSAL DIALOG EXAMPLE
                ElevatedButton(
                  style: ElevatedButton.styleFrom(backgroundColor: Colors.green),
                  onPressed: () async {
                    await DialogHandler.instance.showDialog(
                      dialogType: DialogType.modalDialog,
                      animationType: AnimationType.fromTopToPositionThenBounce,
                      dialogAlignment: Alignment.topCenter,
                      animationDuration: const Duration(milliseconds: 400),
                      animationReverseDuration: const Duration(milliseconds: 400),
                      widget: const ErrorDialogWidgetExample(),
                      autoDismissalDuration: const Duration(seconds: 2),
                    );
                  },
                  child: const Text('Auto Dismissal Dialog Example', style: TextStyle(color: Colors.white)),
                ),
                const SizedBox(height: 10),

                /// NESTED DIALOG EXAMPLE
                ElevatedButton(
                  style: ElevatedButton.styleFrom(backgroundColor: Colors.green),
                  onPressed: () async {
                    DialogHandler.instance.showDialog(
                      dialogType: DialogType.modalDialog,
                      animationType: AnimationType.fromTopToPositionThenBounce,
                      dialogAlignment: Alignment.topCenter,
                      animationDuration: const Duration(milliseconds: 300),
                      widget: const ErrorDialogWidgetExample(),
                      autoDismissalDuration: const Duration(seconds: 2),
                    );
                    Future.delayed(const Duration(seconds: 1));
                    DialogHandler.instance.showDialog(
                      dialogType: DialogType.modalDialog,
                      animationType: AnimationType.fromTopToPositionThenBounce,
                      dialogAlignment: Alignment.topCenter,
                      animationDuration: const Duration(milliseconds: 1400),
                      animationReverseDuration: const Duration(milliseconds: 1400),
                      widget: const ErrorDialogWidgetExample(),
                      autoDismissalDuration: const Duration(seconds: 4),
                    );
                  },
                  child: const Text('Auto Dismissal Nested Dialog Example', style: TextStyle(color: Colors.white)),
                ),
                const SizedBox(height: 10),
                const SizedBox(height: 100),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

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

1 回复

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


dialog_handler 是一个用于简化 Flutter 中对话框管理的插件。它可以帮助你更方便地显示、隐藏和管理对话框，特别是在需要全局管理对话框的情况下。以下是 dialog_handler 的基本使用步骤：

1. 添加依赖

首先，在 pubspec.yaml 文件中添加 dialog_handler 依赖：

dependencies:
  flutter:
    sdk: flutter
  dialog_handler: ^0.3.0  # 请检查最新版本

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

2. 初始化 DialogHandler

在你的应用程序的入口处（通常是 main.dart），初始化 DialogHandler：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'DialogHandler Example',
      navigatorKey: DialogHandler.navigatorKey,  // 设置全局的 navigatorKey
      home: HomeScreen(),
    );
  }
}

3. 使用 DialogHandler 显示对话框

在你的应用程序中，使用 DialogHandler 来显示对话框。例如，在 HomeScreen 中：

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

class HomeScreen extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('DialogHandler Example'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            // 显示对话框
            DialogHandler.showDialog(
              dialog: AlertDialog(
                title: Text('提示'),
                content: Text('这是一个对话框示例'),
                actions: [
                  TextButton(
                    onPressed: () {
                      DialogHandler.hideDialog();  // 隐藏对话框
                    },
                    child: Text('关闭'),
                  ),
                ],
              ),
            );
          },
          child: Text('显示对话框'),
        ),
      ),
    );
  }
}

4. 隐藏对话框

你可以使用 DialogHandler.hideDialog() 来隐藏当前显示的对话框。

5. 处理多个对话框

dialog_handler 还支持管理多个对话框的堆栈。你可以使用 DialogHandler.showDialog() 连续显示多个对话框，并使用 DialogHandler.hideDialog() 逐个隐藏它们。

6. 自定义对话框

你可以使用任何 Widget 作为对话框的内容，不仅仅是 AlertDialog。例如，你可以显示一个自定义的 Dialog 或 BottomSheet。

7. 全局访问

由于 DialogHandler 使用了全局的 navigatorKey，你可以在应用程序的任何地方访问和操作对话框。

示例代码

以下是一个完整的示例代码：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'DialogHandler Example',
      navigatorKey: DialogHandler.navigatorKey,
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('DialogHandler Example'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            DialogHandler.showDialog(
              dialog: AlertDialog(
                title: Text('提示'),
                content: Text('这是一个对话框示例'),
                actions: [
                  TextButton(
                    onPressed: () {
                      DialogHandler.hideDialog();
                    },
                    child: Text('关闭'),
                  ),
                ],
              ),
            );
          },
          child: Text('显示对话框'),
        ),
      ),
    );
  }
}
回到顶部