Flutter消息提示插件sh_toast的使用

Flutter消息提示插件sh_toast的使用

sh_toast 是一个Flutter插件，它提供了在应用中显示通知或提示框的一种简单方式，无需使用上下文。

使用

要使用此插件，你需要将其添加到你的 pubspec.yaml 文件中：

dependencies:
  sh_toast:  # 使用从pub.dev获取的最新版本

然后运行 flutter pub get 来安装该插件。

在你的Dart代码中导入该插件：

import 'package:sh_toast/show_toast.dart';

在你的 MaterialApp 中添加 FToastBuilder()：

return MaterialApp(
  builder: FToastBuilder(),
  // ...
);

或者将你的 MaterialApp 包裹在一个 ShToast 组件中：

return ShToast(
     child: MaterialApp(
 // ...
       
       ));

现在你可以显示一个通知或提示框了。

通知

示例图片 示例图片

参数：

  • title: 通知的标题部件（必填）
  • content: 通知的内容部件（可选）
  • leading: 通知的前导部件（可选）
  • showDismiss: 是否显示取消按钮的标志（默认为true）
  • toastOptions: 自定义通知外观和行为的选项（默认为 NotificationOptions(borderRadius: 5, secondDuration: 4)）
  • dismissButton: 自定义取消按钮部件（默认为 DismissButton()）
  • onTap: 点击通知时触发的回调函数（可选）

示例代码：

ShToast.showNotification(
  title: Text('通知标题'), // 必填
  content: Text('通知内容'),
  showDismiss: true, // 默认为True
  dismissButton: DismissButton(
    onDismiss: () {
      print('取消');
    },
  ),
  onTap: () {
    print('点击通知');
  },
);

提示框

参数：

  • message: 显示在提示框中的消息（必填）
  • toastPostion: 提示框显示的位置（必填）
  • ToastColor: 提示框的背景颜色（默认为黑色）
  • msgStyle: 消息的文字样式（可选）
  • borderRadius: 提示框的圆角半径（默认为10）
  • ToastPadding: 提示框的内边距（默认为 EdgeInsets.symmetric(horizontal: 5, vertical: 3)）
  • ToastDuration: 提示框可见的持续时间（默认为2秒）
  • onTap: 点击提示框时触发的回调函数（可选）

示例代码：

ShToast.showToast(
  message: "你好，这是一条提示框！",
  toastPosition: ToastPostion.top, // 指定提示框的位置
);

更多关于Flutter消息提示插件sh_toast的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

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


当然，以下是如何在Flutter项目中使用sh_toast插件来实现消息提示功能的示例代码。

1. 添加依赖

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

dependencies:
  flutter:
    sdk: flutter
  sh_toast: ^latest_version  # 请替换为最新版本号

运行flutter pub get来安装依赖。

2. 导入包

在你需要使用消息提示功能的Dart文件中导入sh_toast包：

import 'package:sh_toast/sh_toast.dart';

3. 使用示例

下面是一个简单的示例，展示了如何在按钮点击时显示一个消息提示。

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter sh_toast 示例'),
        ),
        body: Center(
          child: ElevatedButton(
            onPressed: () {
              // 显示消息提示
              showToast("这是一个消息提示！");
            },
            child: Text('显示消息提示'),
          ),
        ),
      ),
    );
  }
}

// 自定义的 showToast 函数，封装了 sh_toast 的使用
void showToast(String message) {
  // 简单的文本提示
  SHToast.show(text: message, toastPosition: ToastPosition.center);

  // 如果你需要更多配置，可以使用 SHToastConfig
  // SHToast.show(
  //   text: message,
  //   config: SHToastConfig(
  //     toastPosition: ToastPosition.bottom,
  //     animationType: ToastAnimation.fade,
  //     margin: EdgeInsets.all(20),
  //     backgroundColor: Colors.black54,
  //     textStyle: TextStyle(color: Colors.white),
  //     duration: Duration(seconds: 2),
  //   ),
  // );
}

4. 运行应用

确保你已经正确配置了依赖和代码，然后运行应用。当你点击按钮时，应该会看到一个消息提示显示出来。

注意事项

  • 确保你使用的sh_toast版本与示例代码兼容。
  • sh_toast插件提供了多种配置选项，如位置、动画类型、背景颜色、文本样式和持续时间等，你可以根据需要进行调整。
  • 如果你遇到任何问题，可以参考sh_toast的官方文档或GitHub仓库获取更多信息。

希望这个示例能够帮助你快速上手使用sh_toast插件！

回到顶部