Flutter - 使用 Flash 的 Flashbar、Toast 和 Dialog

Flash 是一个 Flutter 插件，提供了一些可自定义的通知小部件（如 Flashbar、Toast 和 Dialog）。以下是 Flash 的入门指南，以及如何使用它来创建自定义通知。

安装

要使用 Flash，只需在 pubspec.yaml 文件中添加以下行：

dependencies:
  flash: ^0.2.0

然后运行 flutter packages get 来安装。

使用

Flashbar

Flashbar 是一个可自定义的通知小部件，它可以用于显示成功、错误、警告和信息通知。以下是如何使用 Flashbar 的例子：

import 'package:flash/flash.dart';

showFlashBar(BuildContext context) {
  showFlash(
    context: context,
    duration: Duration(seconds: 3),
    builder: (context, controller) {
      return Flash.bar(
        controller: controller,
        backgroundGradient: LinearGradient(
          colors: [Colors.green, Colors.blue],
        ),
        child: FlashBar(
          message: Text('Hello, Flashbar!', style: TextStyle(color: Colors.white)),
        ),
      );
    },
  );
}

Toast

Flash 中的 Toast 是一个轻量级通知小部件，可以在屏幕顶部或底部显示短消息。以下是如何使用 Toast 的例子：

import 'package:flash/flash.dart';

showToast(BuildContext context) {
  showFlash(
    context: context,
    duration: Duration(seconds: 3),
    builder: (context, controller) {
      return Flash.toast(
        controller: controller,
        child: Text('Hello, Toast!', style: TextStyle(color: Colors.white)),
      );
    },
  );
}

Dialog

Flash 中的 Dialog 可以自定义各种对话框，例如警告、确认和提示。以下是使用 Dialog 的例子：

import 'package:flash/flash.dart';

showDialog(BuildContext context) {
  showDialog(
    context: context,
    builder: (context) {
      return AlertDialog(
        title: Text('Hello, Dialog!'),
        actions: [
          FlatButton(
            onPressed: () => Navigator.pop(context),
            child: Text('Close'),
          ),
        ],
      );
    },
  );
}

自定义

Flash 允许对其小部件进行广泛的自定义。以下是 Flashbar 和 Toast 的自定义示例：

import 'package:flash/flash.dart';

showCustomFlashBar(BuildContext context) {
  showFlash(
    context: context,
    duration: Duration(seconds: 3),
    builder: (context, controller) {
      return Flash.bar(
        controller: controller,
        backgroundGradient: RadialGradient(
          center: Alignment.bottomLeft,
          radius: 1,
          colors: [
            Colors.blue,
            Colors.red,
          ],
        ),
        borderRadius: BorderRadius.circular(8.0),
        margin: const EdgeInsets.only(bottom: 60.0),
        child: FlashBar(
          icon: Icon(Icons.info_outline, color: Colors.white),
          message: Text('This is a custom Flashbar!'),
          primaryAction: FlatButton(
            onPressed: () => controller.dismiss(),
            child: Text('CLOSE'),
          ),
          duration: Duration(seconds: 5),
        ),
      );
    },
  );
}

showCustomToast(BuildContext context) {
  showFlash(
    context: context,
    duration: Duration(seconds: 3),
    builder: (context, controller) {
      return Flash.toast(
        controller: controller,
        position: ToastPosition.bottom,
        borderRadius: BorderRadius.circular(8.0),
        child: Container(
          margin: const EdgeInsets.symmetric(horizontal: 16.0),
          padding: const EdgeInsets.symmetric(vertical: 8.0, horizontal: 16.0),
          decoration: BoxDecoration(
            color: Colors.grey[900],
            borderRadius: BorderRadius.circular(8.0),
          ),
          child: Text('This is a custom Toast!', style: TextStyle(color: Colors.white)),
        ),
      );
    },
  );
}

结论

Flash 是一个功能强大的 Flutter 插件，可用于自定义通知小部件（如 Flashbar、Toast 和 Dialog）。从本指南中，您应该已经学会了如何使用 Flash 来创建自定义通知，并对其自定义进行了更多的了解。