Flutter紧凑对话框插件flutter_compact_dialog的使用

安装与使用

在您的pubspec.yaml文件中添加flutter_compact_dialog作为依赖项：

dependencies:
  flutter_compact_dialog: <当前版本>

在Dart文件中导入CompactDialog：

import 'package:flutter_compact_dialog/compact_dialog.dart';

示例

alert（警告）

// 弹出一个警告对话框
CompactDialog.alert(
  context: context, // 当前上下文
  title: '信息', // 对话框标题
  body: '这是一个示例。', // 对话框内容
  iconData: Icons.info, // 图标
  iconColor: Colors.blue, // 图标颜色
  primaryFunction: () { // 确定按钮点击事件
    Navigator.of(context).pop(); // 关闭对话框
  },
);

confirm（确认）

// 弹出一个确认对话框
CompactDialog.confirm(
  context: context, // 当前上下文
  title: '警告', // 对话框标题
  body: '这是一个示例。你想运行它吗？', // 对话框内容
  iconData: Icons.warning, // 图标
  iconColor: Colors.yellow, // 图标颜色
  barrierDismissible: false, // 是否可以通过点击背景关闭对话框
  primaryFunction: () { // 确定按钮点击事件
    Navigator.of(context).pop(); // 关闭对话框
  },
  secondaryFunction: () { // 取消按钮点击事件
    Navigator.of(context).pop(); // 关闭对话框
  },
);

progress（进度条）

// 弹出一个进度条对话框
CompactDialog.progress(
  context: context, // 当前上下文
  body: '加载中...', // 对话框内容
  isCenterBody: true, // 内容是否居中
);

// 延迟3秒后关闭对话框
Future.delayed(Duration(milliseconds: 3000)).then(
  (_) => Navigator.of(context).pop(), // 关闭对话框
);

完整示例

import 'package:flutter/material.dart';
import 'package:flutter_compact_dialog/compact_dialog.dart';

void main() {
  runApp(
    MaterialApp(
      theme: ThemeData(
        brightness: Brightness.light,
      ),
      home: MyApp(),
    ),
  );
}

class MyApp extends StatefulWidget {
  [@override](/user/override)
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  [@override](/user/override)
  void initState() {
    super.initState();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('紧凑对话框示例'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: () {
                CompactDialog.alert(
                  context: context,
                  title: '信息',
                  body: '这是一个示例。',
                  iconData: Icons.info,
                  iconColor: Colors.blue,
                  barrierDismissible: false,
                  primaryFunction: () {
                    Navigator.of(context).pop();
                  },
                );
              },
              child: Text('弹出警告对话框'),
            ),
            ElevatedButton(
              onPressed: () {
                CompactDialog.alert(
                  context: context,
                  title: '信息',
                  body: '这是一个示例。',
                  iconData: Icons.info,
                  iconColor: Colors.blue,
                  barrierDismissible: false,
                  primaryButtonText: '确定',
                  primaryButtonRadius: 20,
                  primaryFunction: () {
                    Navigator.of(context).pop();
                  },
                  radius: 40,
                );
              },
              child: Text('弹出警告对话框 2'),
            ),
            ElevatedButton(
              onPressed: () {
                CompactDialog.confirm(
                  context: context,
                  title: '警告',
                  body: '这是一个示例。你想运行它吗？',
                  iconData: Icons.warning,
                  iconColor: Colors.yellow,
                  barrierDismissible: false,
                  primaryFunction: () {
                    Navigator.of(context).pop();
                  },
                  secondaryFunction: () {
                    Navigator.of(context).pop();
                  },
                );
              },
              child: Text('弹出确认对话框'),
            ),
            ElevatedButton(
              onPressed: () {
                CompactDialog.confirm(
                  context: context,
                  title: '删除',
                  body: '你确定要删除吗？',
                  iconData: Icons.close,
                  iconColor: Colors.red,
                  barrierDismissible: false,
                  primaryButtonText: '删除',
                  primaryButtonColor: Colors.red,
                  primaryFunction: () {
                    Navigator.of(context).pop();
                  },
                  secondaryFunction: () {
                    Navigator.of(context).pop();
                  },
                );
              },
              child: Text('弹出确认对话框 2'),
            ),
            ElevatedButton(
              onPressed: () {
                CompactDialog.progress(
                  context: context,
                  body: '加载中...',
                  isCenterBody: true,
                );

                Future.delayed(Duration(milliseconds: 3000)).then(
                  (_) => Navigator.of(context).pop(),
                );
              },
              child: Text('弹出进度条对话框'),
            ),
          ],
        ),
      ),
    );
  }
}