Flutter快速对话框插件fc_quick_dialog的使用

fc_quick_dialog 是一个用于在 Flutter 应用程序中创建简单 Material 基础对话框的插件。它类似于 JavaScript 中的 alert、confirm 和 prompt。

使用

以下是一些基本示例，展示了如何使用 fc_quick_dialog 插件创建不同类型的对话框：

// 确认对话框。
final result = await FcQuickDialog.confirm(context,
    title: '确认',
    yesText: '是',
    noText: '否',
    cancelText: '取消',
    content: '你确定吗？');

// 标准对话框。
await FcQuickDialog.info(context,
    title: '信息',
    okText: '确定',
    content: '你选择了 $result');

// 错误对话框。
await FcQuickDialog.error(
    context,
    error: '异常: 测试插件错误',
    title: '错误',
    okText: '确定');

// 文本输入对话框。
final text = await FcQuickDialog.textInput(
    context,
    title: '请输入文本',
    subTitle: '这是副标题',
    okText: '确定',
    cancelText: '取消',
  );

// 密码输入对话框。
final pwd = await FcQuickDialog.textInput(
    context,
    title: '请输入密码',
    password: true,
    okText: '确定',
    cancelText: '取消',
  );

完整示例代码

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

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

const colorSeed = Colors.deepPurple;

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(
        useMaterial3: true,
        colorSchemeSeed: colorSeed,
      ),
      darkTheme: ThemeData(
        brightness: Brightness.dark,
        useMaterial3: true,
        colorSchemeSeed: colorSeed,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  // 这个小部件是你的应用程序的主页。它是有状态的，这意味着
  // 它有一个状态对象（定义在下面），其中包含影响其外观的字段。
  // 这个类是状态的配置。它持有由父级（在这个例子中是App小部件）提供的值（在这个例子中是标题）并
  // 由构建方法使用。Widget子类中的字段总是标记为"final"。

  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  String _resultToString(bool? result) {
    if (result == null) {
      return '取消';
    }
    return result ? '是' : '否';
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    // 这个方法每次调用setState时都会被重新运行，例如上面的_incrementCounter方法所做的那样。
    //
    // Flutter框架已经优化了重新运行构建方法的速度，这样你可以只需重建需要更新的部分而不是个别更改小部件实例。
    return Scaffold(
      appBar: AppBar(
        // 尝试这个：尝试在这里将颜色更改为特定颜色（可能是Colors.amber），然后触发热重载以查看AppBar颜色改变而其他颜色保持不变。
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        // 这里我们从MyHomePage对象获取值，该对象是由App.build方法创建的，并用它来设置我们的appbar标题。
        title: Text(widget.title),
      ),
      body: Padding(
        padding: const EdgeInsets.all(20),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            OutlinedButton(
                onPressed: () async {
                  await FcQuickDialog.info(context,
                      title: '信息', content: '你好，世界！', okText: '确定');
                },
                child: const Text('信息')),
            const SizedBox(height: 10),
            OutlinedButton(
                onPressed: () async {
                  await FcQuickDialog.error(context,
                      error: '异常: 测试插件错误',
                      title: '错误',
                      okText: '确定');
                },
                child: const Text('错误')),
            const SizedBox(height: 10),
            OutlinedButton(
                onPressed: () async {
                  final result = await FcQuickDialog.confirm(context,
                      title: '确认',
                      yesText: '是',
                      noText: '否',
                      content: '你确定吗？');
                  if (!context.mounted) {
                    return;
                  }
                  await FcQuickDialog.info(context,
                      title: '信息',
                      okText: '确定',
                      content: '你选择了 "${_resultToString(result)}"');
                },
                child: const Text('确认（是/否）')),
            const SizedBox(height: 10),
            OutlinedButton(
                onPressed: () async {
                  final result = await FcQuickDialog.confirm(context,
                      title: '确认',
                      yesText: '是',
                      noText: '否',
                      cancelText: '取消',
                      content: '你确定吗？');
                  if (!context.mounted) {
                    return;
                  }
                  await FcQuickDialog.info(context,
                      title: '信息',
                      okText: '确定',
                      content: '你选择了 "${_resultToString(result)}"');
                },
                child: const Text('确认（是/否/取消）')),
            const SizedBox(height: 10),
            OutlinedButton(
                onPressed: () async {
                  final result = await FcQuickDialog.textInput(
                    context,
                    title: '请输入文本',
                    subTitle: '这是副标题',
                    okText: '确定',
                    cancelText: '取消',
                  );
                  if (!context.mounted) {
                    return;
                  }
                  await FcQuickDialog.info(context,
                      title: '信息',
                      okText: '确定',
                      content: '你输入了 "$result"');
                },
                child: const Text('文本输入')),
            const SizedBox(height: 10),
            OutlinedButton(
                onPressed: () async {
                  final result = await FcQuickDialog.textInput(
                    context,
                    title: '请输入密码',
                    password: true,
                    okText: '确定',
                    cancelText: '取消',
                  );
                  if (!context.mounted) {
                    return;
                  }
                  await FcQuickDialog.info(context,
                      title: '信息',
                      okText: '确定',
                      content: '你输入了 "$result"');
                },
                child: const Text('密码输入')),
            const SizedBox(height: 10),
            OutlinedButton(
                onPressed: () async {
                  await FcQuickDialog.info(context,
                      titleWidget: const Text(
                        '加粗和蓝色文字',
                        style: TextStyle(
                          color: Colors.blue, // 设置文本颜色为蓝色
                          fontWeight: FontWeight.bold, // 使文本加粗
                          fontSize: 16, // 可选：设置字体大小
                        ),
                      ),
                      contentWidget: const Text(
                        '这是自定义小部件',
                        style: TextStyle(
                          color: Colors.green, // 设置文本颜色为绿色
                          fontSize: 14, // 可选：设置字体大小
                        ),
                      ),
                      okText: '确定');
                },
                child: const Text('自定义小部件')),
          ],
        ),
      ), // 这个尾随逗号使得自动格式化更好看。
    );
  }
}