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

发布于 1周前 作者 yuanlaile 来自 Flutter

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

简介

bot_toast_lego 是一个基于 bot_toast 的 Flutter 插件扩展包。它提供了更灵活的方式来展示 Toast 提示信息。

安装

  1. 如果您的项目尚未创建,请根据 Lego 指南 创建一个新的项目。
  2. 在项目根目录打开终端,运行以下命令:
june add bot_toast_lego

使用方法

显示简单的文本提示

您可以使用 BotToast.showText 方法来显示简单的文本提示。

// 显示一个简单的文本提示
var cancel = BotToast.showText(
  text: "这是一条简单的Toast提示", // 提示文字
);

显示简单通知

您也可以使用 BotToast.showSimpleNotification 方法来显示一个简单的通知。

// 显示一个简单的通知
var cancel = BotToast.showSimpleNotification(
  title: "通知标题", // 通知标题
  subtitle: "这是通知的详细内容", // 通知内容
);

自定义取消回调

如果您希望在用户点击提示时执行某些操作,可以使用 cancel() 方法来实现自定义逻辑。

// 显示提示并绑定取消回调
var cancel = BotToast.showText(
  text: "点击此处关闭提示",
  onTap: () {
    print("提示已关闭"); // 当用户点击提示时触发的回调
  },
);

// 手动调用取消函数
cancel();

常见问题

  • 如何自定义提示样式?
    bot_toast_lego 提供了丰富的配置选项,您可以查看官方文档了解更多自定义方式。

完整示例代码

以下是一个完整的示例代码,演示了如何使用 bot_toast_lego 来显示不同类型的提示。

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
      builder: BotToastInit(), // 初始化 BotToast
    );
  }
}

class MyHomePage extends StatefulWidget {
  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  void showCustomToast() {
    var cancel = BotToast.showText(
      text: "这是一个自定义Toast提示",
      onTap: () {
        print("Toast 已关闭");
        cancel(); // 手动关闭提示
      },
    );
  }

  void showSimpleNotification() {
    var cancel = BotToast.showSimpleNotification(
      title: "通知标题",
      subtitle: "这是通知的详细内容",
    );
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("bot_toast_lego 示例"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: showCustomToast,
              child: Text("显示自定义Toast"),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: showSimpleNotification,
              child: Text("显示简单通知"),
            ),
          ],
        ),
      ),
    );
  }
}

更多关于Flutter自定义Toast提示插件bot_toast_lego的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter自定义Toast提示插件bot_toast_lego的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


bot_toast_lego 是一个基于 bot_toast 的 Flutter 自定义 Toast 提示插件,它提供了更加灵活和强大的 Toast 提示功能。通过 bot_toast_lego,你可以轻松地自定义 Toast 的样式、位置、动画等。

安装

首先,你需要在 pubspec.yaml 文件中添加 bot_toast_lego 依赖:

dependencies:
  flutter:
    sdk: flutter
  bot_toast_lego: ^1.0.0  # 请使用最新版本

然后运行 flutter pub get 来安装依赖。

基本使用

  1. 初始化 BotToast

    在你的 main.dart 文件中,初始化 BotToast

    import 'package:flutter/material.dart';
    import 'package:bot_toast/bot_toast.dart';
    
    void main() {
      runApp(MyApp());
      BotToastInit(); // 初始化 BotToast
    }
    
    class MyApp extends StatelessWidget {
      [@override](/user/override)
      Widget build(BuildContext context) {
        return MaterialApp(
          title: 'Flutter Demo',
          theme: ThemeData(
            primarySwatch: Colors.blue,
          ),
          navigatorObservers: [BotToastNavigatorObserver()], // 添加 BotToast 的导航观察者
          home: MyHomePage(),
        );
      }
    }
  2. 显示 Toast

    使用 BotToast.showText 来显示一个简单的文本 Toast:

    import 'package:flutter/material.dart';
    import 'package:bot_toast/bot_toast.dart';
    
    class MyHomePage extends StatelessWidget {
      [@override](/user/override)
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            title: Text('BotToast Demo'),
          ),
          body: Center(
            child: ElevatedButton(
              onPressed: () {
                BotToast.showText(text: "Hello, BotToast!");
              },
              child: Text('Show Toast'),
            ),
          ),
        );
      }
    }
  3. 自定义 Toast

    你可以通过 BotToast.showCustomText 来显示自定义样式的 Toast:

    BotToast.showCustomText(
      duration: Duration(seconds: 3),
      toastBuilder: (cancelFunc) {
        return Container(
          padding: EdgeInsets.all(10),
          decoration: BoxDecoration(
            color: Colors.black.withOpacity(0.8),
            borderRadius: BorderRadius.circular(10),
          ),
          child: Text(
            "Custom Toast",
            style: TextStyle(color: Colors.white),
          ),
        );
      },
    );
  4. 显示加载中 Toast

    使用 BotToast.showLoading 来显示一个加载中的 Toast:

    BotToast.showLoading();
    // 关闭加载中 Toast
    BotToast.closeAllLoading();
  5. 显示通知 Toast

    使用 BotToast.showNotification 来显示一个通知样式的 Toast:

    BotToast.showNotification(
      title: (_) => Text("Notification Title"),
      subtitle: (_) => Text("This is a notification message."),
    );

高级功能

bot_toast_lego 还支持更多高级功能,例如:

  • 自定义动画:你可以通过 animationDurationanimationReverseDuration 来设置 Toast 的动画时长。
  • 自定义位置:通过 align 参数可以设置 Toast 的显示位置。
  • 自定义背景:通过 backgroundColor 参数可以设置 Toast 的背景颜色。
  • 自定义点击事件:通过 onTap 参数可以设置 Toast 的点击事件。

示例代码

以下是一个完整的示例代码,展示了如何使用 bot_toast_lego 来显示不同类型的 Toast:

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      navigatorObservers: [BotToastNavigatorObserver()],
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('BotToast Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: () {
                BotToast.showText(text: "Hello, BotToast!");
              },
              child: Text('Show Text Toast'),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                BotToast.showCustomText(
                  duration: Duration(seconds: 3),
                  toastBuilder: (cancelFunc) {
                    return Container(
                      padding: EdgeInsets.all(10),
                      decoration: BoxDecoration(
                        color: Colors.black.withOpacity(0.8),
                        borderRadius: BorderRadius.circular(10),
                      ),
                      child: Text(
                        "Custom Toast",
                        style: TextStyle(color: Colors.white),
                      ),
                    );
                  },
                );
              },
              child: Text('Show Custom Toast'),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                BotToast.showLoading();
                Future.delayed(Duration(seconds: 3), () {
                  BotToast.closeAllLoading();
                });
              },
              child: Text('Show Loading Toast'),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                BotToast.showNotification(
                  title: (_) => Text("Notification Title"),
                  subtitle: (_) => Text("This is a notification message."),
                );
              },
              child: Text('Show Notification Toast'),
            ),
          ],
        ),
      ),
    );
  }
}
回到顶部
AI 助手
你好,我是IT营的 AI 助手
您可以尝试点击下方的快捷入口开启体验!