Flutter轻量级提示插件delightful_toast的使用

delightful_toast 是一个为Flutter应用增添交互性和美观性的轻量级提示插件。它提供了丰富的功能，如可滑动关闭、自动消失、按需通过按钮关闭以及以愉悦的方式堆叠提示框等特性。

Features

• Trigger a toastbar：可以触发显示一个提示框。
• Slide to dismiss a toastbar：用户可以通过滑动来关闭提示框。
• Auto dismiss a toastbar：提示框可以在设定的时间后自动消失。
• Dismiss on demand via action buttons：通过动作按钮按需关闭提示框。
• Stacking a toastbar in a delightful way!：以一种愉悦的方式堆叠提示框。

Getting Started

安装

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

dependencies:
  delightful_toast: ^1.1.0

然后在需要使用的Dart文件顶部导入此包：

import 'package:delightful_toast/delight_toast.dart';

Usage

你可以根据应用程序的需求，在不同的事件触发时显示提示框，例如按钮点击事件 (onPressed) 或触摸事件 (onTapped)。

下面是一个完整的示例代码，展示了如何在Flutter项目中集成并使用 delightful_toast 插件。

示例代码

import 'package:delightful_toast/toast/components/toast_card.dart';
import 'package:delightful_toast/delight_toast.dart';
import 'package:flutter/material.dart';
import 'package:flutter_animate/flutter_animate.dart';

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

  @override
  State<DelightToastDemo> createState() => _DelightToastDemoState();
}

class _DelightToastDemoState extends State<DelightToastDemo> {
  bool onClicked = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Delightful Toast Demo'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () async {
            // 显示带有图标和文本的自定义提示框
            DelightToastBar(
              autoDismiss: false, // 设置是否自动消失
              builder: (context) => const ToastCard(
                leading: Icon(
                  Icons.flutter_dash,
                  size: 28,
                ),
                title: Text(
                  "Hi I'm Dash, Let's have a walkthrough of Delight Toast",
                  style: TextStyle(
                    fontWeight: FontWeight.w700,
                    fontSize: 14,
                  ),
                ),
              ),
            ).show(context);

            // 模拟按钮点击动画效果
            setState(() {
              onClicked = true;
            });
            await Future.delayed(const Duration(milliseconds: 300), () {
              setState(() {
                onClicked = false;
              });
            });
          },
          child: const Text(
            "TOAST!",
            style: TextStyle(color: Colors.white, fontSize: 16),
          ),
        ).animate(target: onClicked ? 1 : 0).scaleXY(
              begin: 1,
              end: 0.94,
              curve: Curves.easeInOut,
              duration: const Duration(milliseconds: 100),
            ),
      ),
    );
  }
}

void main() {
  runApp(MaterialApp(
    home: DelightToastDemo(),
  ));
}

在这个例子中，我们创建了一个简单的Flutter应用，其中包含一个按钮。当点击该按钮时，会显示一个自定义的 DelightToastBar 提示框，并且按钮会有轻微的缩放动画效果来增强用户体验。