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

概述

bot_toast_module 是一个用于 Flutter 的自定义 Toast 提示插件。它提供了多种通知方式，包括 Toast、App 内部通知、SnackBar 和 Dialog。该模块是 juneflow 项目的一部分，适合在 Flutter 应用中快速实现通知功能。

安装

要使用 bot_toast_module 插件，请按照以下步骤操作：

1. 如果你的 juneflow 项目不存在，请根据 此指南 创建一个。
2. 在项目的根目录打开终端，运行以下命令：

june add bot_toast_module

使用方法

初始化

在使用 bot_toast_module 之前，需要先初始化。通常在应用的主文件（如 main.dart）中进行初始化。

import 'package:bot_toast_module/bot_toast_module.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return BotToastInit(
      child: MaterialApp(
        title: 'Flutter Demo',
        home: MyHomePage(),
      ),
    );
  }
}

显示简单的 Toast 提示

使用 showToast 方法可以显示简单的 Toast 提示。

import 'package:bot_toast_module/bot_toast_module.dart';

class MyHomePage extends StatelessWidget {
  void showToast() {
    BotToast.showSimpleToast(
      text: "这是一条简单的 Toast 提示",
      duration: Duration(seconds: 2), // 显示时长
      backgroundColor: Colors.black.withOpacity(0.8), // 背景颜色
      textColor: Colors.white, // 文本颜色
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Toast 示例")),
      body: Center(
        child: ElevatedButton(
          onPressed: showToast,
          child: Text("显示 Toast"),
        ),
      ),
    );
  }
}

自定义 Toast 样式

可以通过设置不同的参数来自定义 Toast 的样式。例如，调整位置、字体大小等。

BotToast.showCustomToast(
  child: Container(
    padding: EdgeInsets.symmetric(vertical: 10, horizontal: 20),
    decoration: BoxDecoration(
      color: Colors.red,
      borderRadius: BorderRadius.circular(10),
    ),
    child: Text(
      "自定义样式 Toast",
      style: TextStyle(fontSize: 16, color: Colors.white),
    ),
  ),
  duration: Duration(seconds: 3),
);

显示 SnackBar

除了 Toast，还可以使用 showSnackbar 方法来显示 SnackBar。

void showSnackBar() {
  BotToast.showSnackbar(
    title: "SnackBar 标题",
    content: "这是 SnackBar 的内容",
    duration: Duration(seconds: 3),
    backgroundColor: Colors.blue,
    titleStyle: TextStyle(color: Colors.white),
    contentStyle: TextStyle(color: Colors.white),
  );
}

显示 Dialog

如果需要更复杂的交互，可以使用 showDialog 方法。

void showDialogExample() {
  BotToast.showCustomDialog(
    title: "自定义 Dialog",
    content: "这是一个自定义的 Dialog",
    actions: [
      TextButton(
        onPressed: () {
          Navigator.of(context).pop();
        },
        child: Text("关闭"),
      ),
    ],
  );
}