Flutter闪光效果插件flash的使用

Flash 插件简介

Flash 是一个用于Flutter的高度可定制、强大且易于使用的提示库。它可以在你的应用中快速方便地显示消息或警告，可以作为Snackbar、Toast或Dialog的替代品，并提供了丰富的特性和自定义选项。

• 官方网站: https://sososdk.github.io/flash
• Pub版本:

快速开始

添加依赖

在pubspec.yaml文件中添加如下依赖：

dependencies:
  ...
  flash: ^3.1.0

然后在Dart文件中导入包：

import 'package:flash/flash.dart';

示例项目

为了更好地理解如何使用这个库，你可以查看官方提供的示例项目。

使用方法

以下是几个基本用法的例子，包括Toast、Bar和Dialog等不同类型的消息展示方式。

Toast 消息

简单的Toast消息可以通过以下代码实现：

ElevatedButton(
  onPressed: () => context.showToast(Text('message (Queue)')),
  child: Text('Toast (Queue)'),
),

对于更复杂的Toast消息，您可以指定更多参数如形状、队列行为以及位置：

ElevatedButton(
  onPressed: () => context.showToast(
    Text('message'),
    shape: StadiumBorder(),
    queue: false,
    alignment: Alignment(0.0, -0.3),
  ),
  child: Text('Toast'),
),

Bar 消息

创建一个带有标题、内容和操作按钮的基本Bar消息：

ElevatedButton(
  onPressed: () => context.showFlash<bool>(
    builder: (context, controller) => FlashBar(
      controller: controller,
      indicatorColor: Colors.red,
      icon: Icon(Icons.tips_and_updates_outlined),
      title: Text('Flash Title'),
      content: Text('This is basic flash.'),
      actions: [
        TextButton(onPressed: controller.dismiss, child: Text('Cancel')),
        TextButton(onPressed: () => controller.dismiss(true), child: Text('Ok'))
      ],
    ),
  ),
  child: Text('Basics'),
),

Dialog 消息

创建一个带有自定义动画效果的Dialog：

ElevatedButton(
  onPressed: () => context.showModalFlash(
    builder: (context, controller) => RotationTransition(
      turns: controller.controller.drive(CurveTween(curve: Curves.bounceInOut)),
      child: FadeTransition(
        opacity: controller.controller.drive(CurveTween(curve: Curves.fastOutSlowIn)),
        child: Flash(
          controller: controller,
          dismissDirections: FlashDismissDirection.values,
          slideAnimationCreator: (context, position, parent, curve, reverseCurve) {
            return controller.controller.drive(Tween(begin: Offset(0.1, 0.1), end: Offset.zero));
          },
          child: AlertDialog(
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.all(Radius.circular(16)),
              side: BorderSide(),
            ),
            contentPadding: EdgeInsets.only(left: 24.0, top: 16.0, right: 24.0, bottom: 16.0),
            title: Text('Title'),
            content: Text('Content'),
            actions: [
              TextButton(
                onPressed: controller.dismiss,
                child: Text('Ok'),
              ),
            ],
          ),
        ),
      ),
    ),
  ),
  child: Text('Alert Dialog'),
),

完整示例Demo

下面是一个完整的Flutter应用程序，演示了如何集成并使用flash插件来显示不同类型的提示信息。

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flash Demo',
      theme: ThemeData.light(),
      home: HomePage(title: 'Flash Demo Home Page'),
    );
  }
}

class HomePage extends StatefulWidget {
  HomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            ElevatedButton(
              onPressed: () => context.showToast(Text('Simple Toast Message')),
              child: Text('Show Toast'),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () => context.showFlash<bool>(
                builder: (context, controller) => FlashBar(
                  controller: controller,
                  indicatorColor: Colors.blue,
                  title: Text('Information'),
                  content: Text('This is a flash bar message.'),
                  actions: [
                    TextButton(onPressed: controller.dismiss, child: Text('Close'))
                  ],
                ),
              ),
              child: Text('Show Flash Bar'),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () => showDialog(
                context: context,
                builder: (_) => AlertDialog(
                  title: Text('Alert Dialog'),
                  content: Text('This is an alert dialog message.'),
                  actions: [
                    TextButton(onPressed: () => Navigator.pop(context), child: Text('OK'))
                  ],
                ),
              ),
              child: Text('Show Alert Dialog'),
            ),
          ],
        ),
      ),
    );
  }
}

此示例展示了如何通过按钮点击触发三种不同的提示形式：Toast、Flash Bar 和 Alert Dialog。每个按钮对应一个特定的功能，帮助开发者快速上手并理解flash插件的核心功能。