Flutter通知提示插件flashy_flushbar的使用

Flashy Flushbar

一个高度可定制、可取消且带有动画效果的Flushbar（Toast）插件，适用于Flutter应用程序。

特性

• 可通过多种选项自定义外观。
• 带有动画效果的进入和退出过渡。
• 支持可取消的Flushbar。
• 可以轻松地通过编程方式显示和隐藏Flushbar。

安装

在您的pubspec.yaml文件中添加以下依赖：

dependencies:
  flashy_flushbar: ^1.0.0

然后运行：

flutter pub get

使用

在Dart代码中导入该包：

import 'package:flashy_flushbar/flashy_flushbar.dart';

为了使上下文可用，请在MaterialApp的builder中指定FlashyFlushbarProvider：

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomePage(),
      // 这里
      builder: FlashyFlushbarProvider.init(),
    );
  }
}

现在你可以在Flutter应用中使用FlashyFlushbar。以下是一个基本示例：

FlashyFlushbar(
  leadingWidget: const Icon(
    Icons.error_outline,
    color: Colors.black,
    size: 24,
  ),
  message: 'Hello from Flashy Flushbar',
  duration: const Duration(seconds: 1),
  trailingWidget: IconButton(
    icon: const Icon(
      Icons.close,
      color: Colors.black,
      size: 24,
    ),
    onPressed: () {
      FlashyFlushbar.cancel();
    },
  ),
  isDismissible: false,
).show();

要取消最后一个显示的Flushbar：

FlashyFlushbar.cancel();

要取消所有活动的Flushbar：

FlashyFlushbar.cancelAll();

示例

以下是一个完整的示例代码，展示了如何在Flutter应用中使用FlashyFlushbar：

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      builder: FlashyFlushbarProvider.init(),
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Flashy Flushbar Example'),
        ),
        body: Center(
          child: ElevatedButton(
            onPressed: () {
              // 显示一个简单的FlashyFlushbar
              FlashyFlushbar(
                leadingWidget: const Icon(
                  Icons.error_outline,
                  color: Colors.black,
                  size: 24,
                ),
                message: 'Hello, Flashy Flushbar!',
                duration: const Duration(seconds: 3),
                backgroundColor: Colors.green,
                trailingWidget: IconButton(
                  icon: const Icon(
                    Icons.close,
                    color: Colors.black,
                    size: 24,
                  ),
                  onPressed: () {
                    FlashyFlushbar.cancel();
                  },
                ),
                boxShadows: const [
                  BoxShadow(
                      color: Colors.blue, blurRadius: 4.0, spreadRadius: 2.0),
                ],
              ).show(context);

              // 显示不可取消的FlashyFlushbar
              FlashyFlushbar(
                message: 'You can dismiss this!',
                duration: const Duration(seconds: 3),
                dismissDirection: DismissDirection.horizontal,
                isDismissible: false,
              ).show(context);

              // 延迟2秒后取消最后一个显示的Flushbar
              Future.delayed(const Duration(seconds: 2), () {
                FlashyFlushbar.cancel();
              });
            },
            child: const Text('Show Flashy Flushbar'),
          ),
        ),
      ),
    );
  }
}

在这个示例中，点击按钮会显示两个不同的FlashyFlushbar，并且会在2秒后自动取消最后一个显示的FlashyFlushbar。