Flutter消息提示插件toastify_flutter的使用

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

Flutter消息提示插件toastify_flutter的使用

ToastifyFlutter 包提供了一种在 Flutter 应用程序中轻松显示通知（或称为“吐司”）的方法。这些通知是短暂的弹出消息，用于向用户传达应用程序中的某个操作或状态。

通过使用 ToastifyFlutter，您可以显示带有不同持续时间和屏幕位置的自定义通知。此包简化了在 Flutter 应用程序中实现通知的过程，使您能够以一种视觉上有效的方式轻松地集成信息性消息。

主要功能：

  • 显示带有自定义消息的通知。
  • 配置通知在屏幕上的持续时间和位置。
  • 无缝地将通知集成到 Flutter 应用程序中，以直观地提供用户反馈。

如何使用

在 pubspec.yaml 文件中添加依赖项：

dependencies:
  toastify_flutter: 2.0.0

然后在 Dart 文件中导入该库：

import 'package:toastify_flutter/flutter_toastify.dart';

显示一个通知

要显示一个简单的通知，请使用以下代码：

ToastifyFlutter.success(
  context,
  message: '这是自定义通知消息。',
  duration: 5,
  position: ToastPosition.bottom,
  style: ToastStyle.simple,
  onClose: true,
);

示例

以下是一个完整的示例代码，展示了如何在 Flutter 应用程序中使用 ToastifyFlutter：

import 'package:flutter/material.dart';
import 'package:toastify_flutter/flutter_toastify.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'ToastifyFlutter',
      home: Scaffold(
        appBar: AppBar(
          title: Text('我的应用'),
        ),
        body: Center(
          child: ElevatedButton(
            onPressed: () {
              // 显示成功通知
              ToastifyFlutter.success(
                context,
                message: '这是自定义通知消息。',
                duration: 5,
                position: ToastPosition.bottom,
                style: ToastStyle.simple,
                onClose: true,
              );
            },
            child: Text('显示通知'),
          ),
        ),
      ),
    );
  }
}

成功通知（顶部）

ElevatedButton(
  onPressed: () {
    // 显示成功通知
    ToastifyFlutter.success(
      context,
      message: '这是自定义通知消息。',
      duration: 5,
      position: ToastPosition.top,
      style: ToastStyle.flat,
      onClose: true,
    );
  },
  child: Text('显示通知'),
),

顶部成功通知

错误、信息和警告通知

ElevatedButton(
  onPressed: () {
    // 显示错误通知
    ToastifyFlutter.error(
      context,
      message: '这是自定义通知消息。',
      duration: 5,
      position: ToastPosition.top,
      style: ToastStyle.flat,
      onClose: true,
    );
  },
  child: Text('显示通知'),
),

顶部错误通知 顶部信息通知

底部通知

ElevatedButton(
  onPressed: () {
    // 显示底部通知
    ToastifyFlutter.error(
      context,
      message: '这是自定义通知消息。',
      duration: 5,
      position: ToastPosition.bottom,
      style: ToastStyle.minimal,
      onClose: true,
    );
  },
  child: Text('显示通知'),
),

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

Harmonyos Next教程
1 回复

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


当然，以下是如何在Flutter项目中使用toastify_flutter插件来实现消息提示的示例代码。toastify_flutter是一个流行的Flutter插件，用于显示简洁美观的Toast消息。

步骤1：添加依赖

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

dependencies:
  flutter:
    sdk: flutter
  toastify_flutter: ^4.0.4  # 请检查最新版本号

然后运行flutter pub get来获取依赖。

步骤2：导入插件

在你希望使用Toast消息的Dart文件中导入toastify_flutter：

import 'package:toastify_flutter/toastify_flutter.dart';

步骤3：初始化Toastify

在应用启动时初始化Toastify。通常在MaterialApp或CupertinoApp的builder属性中进行初始化：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ToastifyProvider(
      child: MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: MyHomePage(),
      ),
    );
  }
}

步骤4：显示Toast消息

现在你可以在任何地方使用Toastify上下文来显示Toast消息。例如，在一个按钮点击事件中：

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

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Toastify Flutter Demo'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            // 显示简单Toast消息
            context.toast("Hello, Toastify!");

            // 显示带有配置选项的Toast消息
            context.toastify(
              msg: "This is a custom Toast",
              duration: Toast.LENGTH_SHORT,
              gravity: Toast.BOTTOM,
              backgroundColor: Colors.green,
              textColor: Colors.white,
              fontSize: 16.0,
            );
          },
          child: Text('Show Toast'),
        ),
      ),
    );
  }
}

完整示例代码

以下是完整的示例代码，展示了如何在一个简单的Flutter应用中集成和使用toastify_flutter：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ToastifyProvider(
      child: MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: MyHomePage(),
      ),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Toastify Flutter Demo'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            // 显示简单Toast消息
            context.toast("Hello, Toastify!");

            // 显示带有配置选项的Toast消息
            context.toastify(
              msg: "This is a custom Toast",
              duration: Toast.LENGTH_SHORT,
              gravity: Toast.BOTTOM,
              backgroundColor: Colors.green,
              textColor: Colors.white,
              fontSize: 16.0,
            );
          },
          child: Text('Show Toast'),
        ),
      ),
    );
  }
}

这个示例展示了如何设置和使用toastify_flutter插件来显示Toast消息。你可以根据需要调整Toast消息的样式和配置。

回到顶部