Flutter自定义Toast提示插件flutter_modified_toast的使用

描述

flutter_modified_toast 是一个用于在移动应用中创建可定制Toast通知的Flutter插件。它允许开发者轻松地向用户展示非干扰性的消息，从而提升用户体验。

特性

• 可定制外观：可以更改颜色、文字样式和持续时间以匹配应用程序的设计。
• 多种Toast类型：支持不同类型的Toast（例如成功、错误、信息）。
• 位置控制：可以选择Toast在屏幕上的显示位置（顶部、底部、中心）。
• 动画效果：支持显示和隐藏时的动画效果，使用户体验更加流畅。

开始使用

前提条件

• 确保已安装Flutter SDK。
• 创建一个Flutter项目（可以通过命令 flutter create your_project_name 创建）。

安装

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

dependencies:
  flutter_modified_toast: ^1.0.0

然后运行以下命令以安装插件：

flutter pub get

使用

以下是一个简单的示例，展示如何在Flutter应用中使用 flutter_modified_toast 插件：

// ignore_for_file: depend_on_referenced_packages

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: ToastDemo(),
    );
  }
}

class ToastDemo extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('自定义Toast示例')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: () {
                showModifiedToast(
                  context: context,
                  message: "操作成功！您的操作已完成。",
                  type: ModifiedToastType.success,
                  backgroundColor: Colors.green,
                  icon: const Icon(Icons.check_circle, color: Colors.white),
                );
              },
              child: const Text('显示成功Toast'),
            ),
            ElevatedButton(
              onPressed: () {
                showModifiedToast(
                  context: context,
                  message: "发生错误！请稍后重试。",
                  type: ModifiedToastType.error,
                  backgroundColor: Colors.red,
                  icon: const Icon(Icons.error, color: Colors.white),
                );
              },
              child: const Text('显示错误Toast'),
            ),
            ElevatedButton(
              onPressed: () {
                showModifiedToast(
                  context: context,
                  message: "警告！请检查输入。",
                  type: ModifiedToastType.warning,
                  backgroundColor: Colors.orange,
                  icon: const Icon(Icons.warning, color: Colors.white),
                );
              },
              child: const Text('显示警告Toast'),
            ),
            ElevatedButton(
              onPressed: () {
                showModifiedToast(
                  context: context,
                  message: "信息！这里有一些信息。",
                  type: ModifiedToastType.info,
                  backgroundColor: Colors.blue,
                  icon: const Icon(Icons.info, color: Colors.white),
                );
              },
              child: const Text('显示信息Toast'),
            ),
            ElevatedButton(
              onPressed: () {
                ModifiedToast(
                  context: context,
                  message: "需要操作！点击继续。",
                  type: ModifiedToastType.info,
                  duration: 3,
                  icon: const Icon(Icons.info, color: Colors.white),
                  actionLabel: "继续",
                  actionCallback: () {
                    print("操作按钮被点击！");
                  },
                  persistent: true, // 此Toast会一直存在，直到手动关闭
                  backgroundImage: 'https://picsum.photos/200/300',
                  borderRadius: BorderRadius.circular(20.0),
                ).show();
              },
              child: const Text('显示带有操作按钮的持久Toast'),
            ),
          ],
        ),
      ),
    );
  }

  void showModifiedToast({
    required BuildContext context,
    required String message,
    required ModifiedToastType type,
    required Color backgroundColor,
    Icon? icon,
  }) {
    ModifiedToast(
      position: ModifiedToastPosition.center,
      context: context,
      message: message,
      type: type,
      duration: 2,
      icon: icon,
      textStyle: const TextStyle(fontSize: 16, color: Colors.white),
      dismissOnTap: true,
      backgroundColor: backgroundColor,
      width: 300,
      height: 100,
      borderRadius: BorderRadius.circular(20.0),
      shadowOffset: const Offset(0, 4),
      borderColor: Colors.black,
      borderWidth: 2.0,
      dismissOnSwipe: true,
      onShow: () => print("Toast显示"),
      onDismiss: () => print("Toast消失"),
      opacity: 0.9,
      fadeDuration: 0.5,
      slideDistance: 50.0,
      scaleFactor: 1.1,
    ).show();
  }
}