Flutter消息提示插件toast_notification的使用

Flutter消息提示插件toast_notification的使用

特性

允许您显示带有自定义时长的消息提示，或者在任何时候关闭它。

  • 设置自定义消息
  • 设置显示时长
  • 不设置时长，并在需要时随时关闭，例如响应服务器返回的结果

开始使用

此消息提示可以在任何页面上使用，只要该页面被Stack包裹，并且我们的包作为Stack的子元素之一。您可以阅读使用方法或示例以更好地理解。

安装

在终端运行以下命令来安装包。

flutter pub get toast_notification

或者，在您的pubspec.yaml文件中添加以下行：

dependencies:
  flutter:
    sdk: flutter
  toast_notification: 1.0.0

基本设置

在代码中添加以下片段，可能是在某个函数调用中…

onClick() {
    ToastMe(
        text: "成功发布内容",
        type: ToasterType.Check).showToast(context);
}

示例展示

示例消息提示
展示上述示例的代码：

ToastMe(
    text: "无效验证码，请重试！",
    type: ToasterType.Error,
    controller: toasterController,).showToast(context);

额外信息

除了这些基本选项外，此通知还提供了几个其他选项供您使用，以便根据您的应用需求自定义此消息提示。

类型

目前有三种类型，未来计划添加更多类型。

  • ToasterType.Loading
  • ToasterType.Check
  • ToasterType.Error
各部分的颜色

默认情况下，图标的颜色和文本颜色为白色，背景颜色为#1a1a1a。如果您想设置自定义颜色，可以这样做：

ToastMe(
    text: "成功完成某事",
    type: ToasterType.Check,
    controller: toasterController,
    iconColor: Colors.white,
    backgroundColor: Colors.black,
    textColor: Colors.white).showToast(context);
没有时长

如果您不设置时长，那么默认行为是消息提示不会自动消失，除非调用此函数：

toasterController.end();
设有时长

如果您设置了时长，那么消息提示会在给定时间后自动消失。注意，时长是以毫秒为单位，并且数据类型为int?。 首先在顶部创建控制器，最好在builder函数之外创建：

final ToasterController toasterController = ToasterController();

然后使用控制器来显示消息提示：

ToastMe(
    text: "成功发布内容",
    type: ToasterType.Check,
    duration: 2000 // 在毫秒内
    ).showToast(context);
更改文本

您还可以在应用程序中稍后更改文本，例如：

toasterController.setData("新的文本");

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

1 回复

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


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

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

dependencies:
  flutter:
    sdk: flutter
  toast_notification: ^0.2.0  # 请注意版本号，使用最新的版本

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

接下来，你可以在你的Flutter应用中按照以下步骤使用toast_notification插件：

  1. 导入插件：

在你的Dart文件中导入toast_notification插件：

import 'package:toast_notification/toast_notification.dart';
  1. 初始化ToastNotification：

在你的应用的根级别（通常是在MaterialApp或CupertinoApp的builder中）初始化ToastNotification：

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ToastNotification(
      child: MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: MyHomePage(),
      ),
    );
  }
}
  1. 显示Toast消息：

在你的应用中，你可以通过ToastNotification().showToast方法来显示Toast消息。例如，在一个按钮点击事件中：

class MyHomePage extends StatelessWidget {
  final ToastNotificationProvider _toastNotificationProvider = ToastNotificationProvider();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Toast Notification Demo'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            _toastNotificationProvider.showToast(
              message: "这是一个Toast消息",
              duration: ToastDuration.long, // 可以是ToastDuration.short或ToastDuration.long
              gravity: ToastGravity.bottom, // 可以是ToastGravity.top, ToastGravity.bottom, ToastGravity.center
              backgroundColor: Colors.blue,
              textColor: Colors.white,
              fontSize: 16.0,
            );
          },
          child: Text('显示Toast'),
        ),
      ),
    );
  }
}

注意：上面的代码示例中，我们直接使用了ToastNotificationProvider()来显示Toast消息，但在实际使用中，你可能需要通过Provider包或context来获取ToastNotificationProvider的实例，以便在非顶层组件中调用showToast方法。这里为了简化示例，直接在组件内部创建了ToastNotificationProvider的实例。

为了更规范地使用，你可以考虑使用Provider包来管理ToastNotificationProvider的状态，这样可以在应用的任何地方通过Provider.of<ToastNotificationProvider>(context)来获取实例。

例如，使用Provider包时的初始化方式：

import 'package:provider/provider.dart';

void main() {
  runApp(
    MultiProvider(
      providers: [
        ChangeNotifierProvider(create: (_) => ToastNotificationProvider()),
      ],
      child: MyApp(),
    ),
  );
}

然后在组件中通过Provider.of<ToastNotificationProvider>(context)来获取实例并调用showToast方法。

希望这个示例能帮你更好地理解如何在Flutter中使用toast_notification插件来实现消息提示功能。

回到顶部