Flutter自适应对话框插件flutter_adaptive_dialog的使用

Flutter 自适应对话框插件 flutter_adaptive_dialog 的使用 #

一个可定制的 Flutter 警告对话框，可以自动适应 Android 和 iOS 平台。该插件允许开发者为标题、内容和按钮设置不同的样式。

由 [@badiniibrahim](/user/badiniibrahim) 创建 #

如果你喜欢我的一些工作，请买杯咖啡支持我。感谢你的支持 ❤️

Buy Me A Coffee

截图 #

alt text

功能 #

  • 跨平台支持：自动适应 iOS 和 Android 风格。

  • 可定制样式：允许自定义标题、内容和按钮的文字样式。

  • 简单的 API：易于集成到任何 Flutter 应用程序中。

开始使用 #

在你的 `pubspec.yaml` 文件中添加依赖：

dependencies:
  ...
    adaptive_alert_dialog: latest_version

完整的示例展示如何使用 Flutter 自适应对话框 #

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

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


@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: ‘自适应警告对话框示例’,
home: Scaffold(
appBar: AppBar(
title: const Text(“自适应警告对话框”),
),
body: Center(
child: Builder(
builder: (BuildContext context) {
return ElevatedButton(
onPressed: () async {
// 显示自适应警告对话框
bool? result = await AdaptiveAlertDialog.show(
context: context,
title: “确认操作”,
content: “你确定要执行此操作吗？”,
confirmText: “是”,
cancelText: “否”,
titleStyle: const TextStyle(
fontWeight: FontWeight.bold, color: Colors.blue),
contentStyle:
const TextStyle(fontSize: 16, color: Colors.black),
confirmButtonStyle: const TextStyle(
color: Colors.green,
fontWeight: FontWeight.bold), // 是按钮样式
cancelButtonStyle: const TextStyle(
color: Colors.red), // 否按钮样式
);


              // 根据用户的选择打印相应的消息
              if (result == true) {
                print("用户确认。");
              } else {
                print("用户取消。");
              }
            },
            child: const Text("显示对话框"),
          );
        },
      ),
    ),
  ),
);

}
}

参数 #

  • context: (必需) 用于显示对话框的 BuildContext。
  • title: (必需) 对话框的标题。
  • content: (必需) 对话框的内容/消息。
  • confirmText: (必需) 确认按钮的文本。
  • cancelText: (可选) 取消按钮的文本。如果为 null，则不显示取消按钮。
  • titleStyle: (可选) 标题文字的样式。
  • contentStyle: (可选) 内容文字的样式。
  • confirmButtonStyle: (可选) 确认按钮文字的样式。
  • cancelButtonStyle: (可选) 取消按钮文字的样式。

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

1 回复

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


flutter_adaptive_dialog 是一个用于在 Flutter 应用中创建自适应对话框的插件。它可以根据平台（Android 或 iOS）自动调整对话框的样式，以确保在不同平台上都能提供一致的用户体验。以下是如何使用 flutter_adaptive_dialog 插件的基本步骤：

1. 添加依赖

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

dependencies:
  flutter:
    sdk: flutter
  flutter_adaptive_dialog: ^1.0.0  # 请检查最新版本

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

2. 导入包

在你的 Dart 文件中导入 flutter_adaptive_dialog 包：

import 'package:flutter_adaptive_dialog/flutter_adaptive_dialog.dart';

3. 使用 showAdaptiveDialog

flutter_adaptive_dialog 提供了一个 showAdaptiveDialog 方法，用于显示自适应对话框。以下是一个简单的示例：

void showCustomDialog(BuildContext context) {
  showAdaptiveDialog(
    context: context,
    builder: (BuildContext context) {
      return AlertDialog.adaptive(
        title: Text('提示'),
        content: Text('这是一个自适应对话框示例。'),
        actions: <Widget>[
          TextButton(
            child: Text('取消'),
            onPressed: () {
              Navigator.of(context).pop();
            },
          ),
          TextButton(
            child: Text('确定'),
            onPressed: () {
              // 处理确定按钮点击事件
              Navigator.of(context).pop();
            },
          ),
        ],
      );
    },
  );
}

4. 调用对话框

你可以在需要显示对话框的地方调用 showCustomDialog 方法：

ElevatedButton(
  onPressed: () {
    showCustomDialog(context);
  },
  child: Text('显示对话框'),
),

5. 自定义对话框

showAdaptiveDialog 方法允许你自定义对话框的样式。你可以根据需要设置对话框的标题、内容、按钮等。

6. 平台自适应

flutter_adaptive_dialog 会根据当前运行的平台（Android 或 iOS）自动调整对话框的样式。例如，在 iOS 上，对话框可能会使用 CupertinoAlertDialog，而在 Android 上，它可能会使用 MaterialAlertDialog。

7. 其他功能

flutter_adaptive_dialog 还支持其他类型的对话框，例如确认对话框、输入对话框等。你可以查阅插件的文档以获取更多信息。

8. 完整示例

以下是一个完整的示例，展示了如何使用 flutter_adaptive_dialog 创建一个自适应对话框：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Adaptive Dialog 示例'),
        ),
        body: Center(
          child: ElevatedButton(
            onPressed: () {
              showCustomDialog(context);
            },
            child: Text('显示对话框'),
          ),
        ),
      ),
    );
  }
}

void showCustomDialog(BuildContext context) {
  showAdaptiveDialog(
    context: context,
    builder: (BuildContext context) {
      return AlertDialog.adaptive(
        title: Text('提示'),
        content: Text('这是一个自适应对话框示例。'),
        actions: <Widget>[
          TextButton(
            child: Text('取消'),
            onPressed: () {
              Navigator.of(context).pop();
            },
          ),
          TextButton(
            child: Text('确定'),
            onPressed: () {
              // 处理确定按钮点击事件
              Navigator.of(context).pop();
            },
          ),
        ],
      );
    },
  );
}
回到顶部