Flutter弹窗确认插件show_confirm_modal的使用

Flutter弹窗确认插件show_confirm_modal的使用

允许显示一个带有回调的简单确认弹窗。

安装

在终端运行以下命令：

flutter pub add show_confirm_modal

使用

以下是 showConfirm 方法的基本用法示例：

import 'package:show_confirm_modal/show_confirm_modal.dart';

/// 最小化示例
showConfirm(
    context: context,
    onCancel: () => print("取消"),
    onConfirm: () => print("确认"),
);

/// 带有自定义标题和消息的示例
showConfirm(
    context: context,
    title: Text("标题"),
    message: Text("消息"),
    onCancel: () => print("取消"),
    onConfirm: () => print("确认"),
);

/// 具有自定义按钮的完整示例
showConfirm(
    context: context,
    title: Text("标题"),
    message: Text("消息"),
    cancel: Text("取消"),
    confirm: Text("确认"),
    onCancel: () => print("取消"),
    onConfirm: () => print("确认"),
);

渲染

以下是弹窗的渲染效果：

弹窗示意图

示例代码

下面是完整的示例代码：

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

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const HomeScreen(),
    );
  }
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Flutter Demo 主页'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: () => showConfirm(
                context: context,
                onCancel: () => print("取消"),
                onConfirm: () => print("确认"),
              ),
              child: const Text('显示确认弹窗'),
            ),
            ElevatedButton(
              onPressed: () => showConfirm(
                context: context,
                title: "自定义标题",
                message: "自定义内容",
                cancelText: "自定义取消",
                confirmText: "自定义确认",
                onCancel: () => print("取消"),
                onConfirm: () => print("确认"),
              ),
              child: const Text('显示确认弹窗（所有选项）'),
            )
          ],
        ),
      ),
    );
  }
}

更多关于Flutter弹窗确认插件show_confirm_modal的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter弹窗确认插件show_confirm_modal的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，下面是一个关于如何使用 show_confirm_modal 插件在 Flutter 中实现弹窗确认功能的代码示例。

首先，确保你已经在 pubspec.yaml 文件中添加了 show_confirm_modal 依赖：

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

然后运行 flutter pub get 来获取依赖。

接下来，在你的 Dart 文件中导入该插件并使用它。以下是一个完整的示例，展示如何在点击按钮时显示一个确认弹窗：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Show Confirm Modal Example'),
        ),
        body: Center(
          child: ElevatedButton(
            onPressed: () async {
              bool result = await showConfirmModal(
                context: context,
                title: 'Confirm Action',
                content: 'Are you sure you want to perform this action?',
                confirmText: 'Yes',
                cancelText: 'No',
              );

              if (result) {
                // 用户点击了确认按钮
                ScaffoldMessenger.of(context).showSnackBar(
                  SnackBar(content: Text('Action confirmed!')),
                );
              } else {
                // 用户点击了取消按钮或关闭了弹窗
                ScaffoldMessenger.of(context).showSnackBar(
                  SnackBar(content: Text('Action cancelled.')),
                );
              }
            },
            child: Text('Show Confirm Modal'),
          ),
        ),
      ),
    );
  }
}

代码说明：

  1. 导入插件：

    import 'package:show_confirm_modal/show_confirm_modal.dart';

  2. 创建按钮并绑定点击事件：

    ElevatedButton(
  onPressed: () async {
    bool result = await showConfirmModal(
      context: context,
      title: 'Confirm Action',
      content: 'Are you sure you want to perform this action?',
      confirmText: 'Yes',
      cancelText: 'No',
    );

    if (result) {
      // 用户点击了确认按钮
      ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(content: Text('Action confirmed!')),
      );
    } else {
      // 用户点击了取消按钮或关闭了弹窗
      ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(content: Text('Action cancelled.')),
      );
    }
  },
  child: Text('Show Confirm Modal'),
)

  3. 使用 showConfirmModal 函数：

    • context：当前的上下文。
    • title：弹窗的标题。
    • content：弹窗的内容。
    • confirmText：确认按钮的文本。
    • cancelText：取消按钮的文本。

  4. 处理用户的选择：

    • result 为 true 表示用户点击了确认按钮。
    • result 为 false 表示用户点击了取消按钮或关闭了弹窗。

通过这种方式，你可以轻松地在 Flutter 应用中实现确认弹窗功能。

回到顶部