Flutter模态对话框插件flutter_modal_dialog的使用

发布于 1周前 作者 itying888 来自 Flutter

Flutter模态对话框插件flutter_modal_dialog的使用

Flutter模态对话框

一个简单的包，包含简单的模态对话框，适用于不想自己创建对话框的人。

特性

  • 需要的自定义较少；
  • 简单对话框用于显示简单的消息；
  • 详细对话框可以在隐藏那些讨厌的细节的同时仍然传递这些信息；
  • 等待对话框用于在应用程序处理时显示一些内容；

开始使用

手动安装

在你的Flutter应用的pubspec.yaml文件中添加以下内容：

dependencies:
  flutter_modal_dialog: <最新版本>

你也可以通过以下命令通过pub.dev添加它：

flutter pub add flutter_modal_dialog

使用

ModalDialog.simple

ModalDialog.simple是一个显示单一消息的对话框，应该简短，如“数据已发送”或“上传完成”，它有一个按钮可以关闭对话框。

ModalDialog.simple(
  context: context,
  title: const ModalTitle(
    text: "这是一条简短的消息",
  ),
  button: const ModalButton(text: "好的！"),
);

预览

简短消息

ModalDialog.detailed

ModalDialog.detailed是我创建此包的原因，为了有一个对话框能够同时显示标题、消息和隐藏的消息，用户可以通过点击来提供详细的错误信息。

ModalDialog.detailed(
  context: context,
  title: const ModalTitle(text: "这是一条简短的消息"),
  message: "这是一条更大的消息，解释了标题",
  detail: const ModalDetail(
    visibleText: "详细消息",
    hiddenText: "这是一条详细的包含更多信息的消息，关于标题和消息",
  ),
  button: const ModalButton(text: "好的！"),
);

预览

隐藏详情：

隐藏详情

显示详情：

显示详情

ModalDialog.waiting

ModalDialog.waiting是一个没有按钮的对话框。它是为在后台处理某些事情的应用程序创建的，处理完成后，应用程序也应该关闭对话框。

ModalDialog.waiting(
  context: context,
  title: const ModalTitle(text: "正在处理"),
  message: "请等待我们处理您的请求",
);

Future.delayed(const Duration(seconds: 5), () {
  Navigator.pop(context);
});

预览

等待处理

ModalDialog.confirmation

ModalDialog.confirmation将显示一个带有“是”和“否”选项的对话框。

ModalDialog.confirmation(
  context: context,
  title: const ModalTitle(text: "请确认"),
  message: "这是一个简单的是/否问题",
  confirmButton: const ModalButton(text: "确定"),
);

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

1 回复

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


当然，以下是一个关于如何在Flutter中使用flutter_modal_dialog插件来创建模态对话框的示例代码。这个插件可以让你轻松地在Flutter应用中创建和管理模态对话框。

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

dependencies:
  flutter:
    sdk: flutter
  flutter_modal_dialog: ^x.y.z  # 请替换为最新版本号

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

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

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Modal Dialog Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final ModalDialogController modalDialogController = ModalDialogController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Modal Dialog Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              'Button press count: 0',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          showModalDialog(
            context: context,
            controller: modalDialogController,
            builder: (context) => CustomModalDialog(),
          );
        },
        tooltip: 'Show Modal Dialog',
        child: Icon(Icons.add),
      ),
    );
  }
}

class CustomModalDialog extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final ModalDialogController controller = ModalDialog.of(context)!;

    return ModalDialog(
      controller: controller,
      title: Text('Custom Modal Dialog'),
      content: Container(
        height: 200,
        child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text('This is a custom modal dialog!'),
              ElevatedButton(
                onPressed: () {
                  controller.dismiss();
                },
                child: Text('Close'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

在这个示例中，我们做了以下事情：

  1. 在pubspec.yaml文件中添加了flutter_modal_dialog依赖。
  2. 创建了一个简单的Flutter应用，其中包含一个主屏幕（MyHomePage）。
  3. 在主屏幕上，我们添加了一个浮动操作按钮（FAB），当用户点击该按钮时，会显示一个模态对话框。
  4. CustomModalDialog是一个自定义的模态对话框，包含了一个标题、一些内容和一个关闭按钮。

通过运行这个示例，你可以看到当点击FAB时，会显示一个模态对话框，并且点击对话框中的关闭按钮会关闭对话框。

请确保你使用的是flutter_modal_dialog的最新版本，并根据需要调整代码。

回到顶部