Flutter轻量级弹窗插件tiny_alert的使用

tiny_alert 是一个用于在 Flutter 应用中显示轻量级弹窗的插件。它提供了多种类型的弹窗，包括成功、信息、警告、错误、确认和加载提示等。

安装

首先，在 pubspec.yaml 文件中添加 tiny_alert 依赖：

dependencies:
  tiny_alert: <version>

然后运行以下命令以获取包：

$ flutter pub get

使用示例

成功弹窗

TinyAlert.success(
  context,
  title: "Success!",
  message: "This is a success message!",
);

信息弹窗

TinyAlert.info(
  context,
  title: "Info!",
  message: "This is a info message!",
);

警告弹窗

TinyAlert.warning(
  context,
  title: "Warning!",
  message: "This is a warning message!",
);

错误弹窗

TinyAlert.error(
  context,
  title: "Error!",
  message: "This is a error message!",
);

确认弹窗

TinyAlert.confirm(
  context,
  title: "Confirmation!",
  message: "This is a confirmation message!",
  onConfirm: () {
    Navigator.pop(context);
  },
);

加载弹窗

TinyAlert.progress(
  context,
  label: "Loading...",
  barrierDismissible: true, // 是否可以通过点击背景关闭弹窗，默认为false
);

Snackbar 弹窗

TinyAlert.snackbar(
  context,
  "This is snackbar message!",
);

完整示例代码

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

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

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

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      darkTheme: ThemeData.dark(useMaterial3: true),
      home: const HomePage(),
    );
  }
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Tiny Alert Demo'),
      ),
      body: SizedBox(
        width: double.infinity,
        child: Column(
          mainAxisSize: MainAxisSize.max,
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: () {
                TinyAlert.success(
                  context,
                  title: "Success!",
                  message:
                      "This is a success message! \nAute nostrud Lorem pariatur aliqua ut reprehenderit esse reprehenderit aliqua officia pariatur dolore aliqua cupidatat.",
                );
              },
              style: ElevatedButton.styleFrom(
                backgroundColor: Colors.green,
                foregroundColor: Colors.white,
              ),
              child: const Text('Success!'),
            ),
            ElevatedButton(
              onPressed: () {
                TinyAlert.info(
                  context,
                  title: "Info!",
                  message: "This is a info message!",
                );
              },
              style: ElevatedButton.styleFrom(
                backgroundColor: Colors.blue,
                foregroundColor: Colors.white,
              ),
              child: const Text('Info!'),
            ),
            ElevatedButton(
              onPressed: () {
                TinyAlert.warning(
                  context,
                  title: "Warning!",
                  message: "This is a warning message!",
                );
              },
              style: ElevatedButton.styleFrom(
                backgroundColor: Colors.amber[700],
                foregroundColor: Colors.white,
              ),
              child: const Text('Warning!'),
            ),
            ElevatedButton(
              onPressed: () {
                TinyAlert.error(
                  context,
                  title: "Error!",
                  message: "This is a error message!",
                );
              },
              style: ElevatedButton.styleFrom(
                backgroundColor: Colors.red,
                foregroundColor: Colors.white,
              ),
              child: const Text('Error!'),
            ),
            ElevatedButton(
              onPressed: () {
                TinyAlert.confirm(
                  context,
                  title: "Confirmation?",
                  message: "This is a confirmation message!",
                  onConfirm: () {
                    Navigator.pop(context);
                  },
                );
              },
              style: ElevatedButton.styleFrom(
                backgroundColor: Colors.tealAccent[700],
                foregroundColor: Colors.white,
              ),
              child: const Text('Confirm!'),
            ),
            ElevatedButton(
              onPressed: () {
                TinyAlert.progress(context, label: "Loading...", barrierDismissible: true);
              },
              style: ElevatedButton.styleFrom(
                backgroundColor: Colors.blue,
                foregroundColor: Colors.white,
              ),
              child: const Text('Loading!'),
            ),
            ElevatedButton(
              onPressed: () {
                TinyAlert.snackbar(
                  context,
                  "This is snackbar message!",
                );
              },
              style: ElevatedButton.styleFrom(
                backgroundColor: Colors.indigo[400],
                foregroundColor: Colors.white,
              ),
              child: const Text('Snackbar!'),
            ),
          ],
        ),
      ),
    );
  }
}