Flutter本地通知插件native_toast的使用

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

Flutter本地通知插件native_toast的使用

简介

native_toast 是一个用于在 Android 设备上显示原生 Toast 消息的 Flutter 插件。它通过 Flutter 的平台通道与 Android 原生库连接,利用 Android 的 Toast 类来显示消息。

Native Toast

工作原理

native_toast 插件基于 Android 的 Toast 类工作。通过 Flutter 的平台通道,将 Flutter 应用中的调用传递给 Android 原生代码,从而显示 Toast 消息。

示例演示

以下是插件在 Android 12-light(SDK 31)设备上的演示,分别展示了浅色和深色主题下的效果:

Light Theme Demo Image Dark Theme Demo Image

注意:Toast 的布局取决于 Android 版本和 OEM 的实现方式。在最新的 Android 版本中,例如 Android 12,Toast 会带有应用图标和文本一起显示。

使用方法

导入插件

首先,在你想要显示 Toast 的 .dart 文件中导入 native_toast 包:

import 'package:native_toast/native_toast.dart';

显示 Toast

使用 NativeToast() 类来显示 Toast 消息:

await NativeToast().makeText(
    message: "This is a Native Toast On Android!",
    duration: NativeToast.shortLength,
);

设置持续时间

可以通过 duration 参数设置 Toast 的持续时间。duration 接受一个 int 值,插件提供了两个内置常量:

  • 短时间:

    NativeToast.shortLength
    
  • 长时间:

    NativeToast.longLength
    

如果未传递 duration 参数,默认持续时间为 NativeToast.shortLength

示例代码

以下是一个完整的示例,展示如何在按钮点击时显示 Toast 消息:

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

void main() {
  runApp(const App());
}

class App extends StatefulWidget {
  const App({Key? key}) : super(key: key);

  @override
  _AppState createState() => _AppState();
}

class _AppState extends State<App> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Native Toast Example',
      theme: ThemeData.light(),
      darkTheme: ThemeData.dark(),
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Native Toast Example'),
        ),
        body: Center(
          child: ElevatedButton(
            child: const Text('Show Native Toast'),
            onPressed: () async {
              await NativeToast().makeText(
                message: "This is a Native Toast On Android!",
                duration: NativeToast.shortLength,
              );
            },
          ),
        ),
      ),
    );
  }
}

作者

Mihir Paldhikar

许可证

该项目采用 MIT 许可证。详细信息请参阅 LICENSE 文件。


更多关于Flutter本地通知插件native_toast的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter本地通知插件native_toast的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然,以下是如何在Flutter项目中使用native_toast插件来实现本地通知的示例代码。native_toast是一个轻量级的Flutter插件,用于在Android和iOS上显示简单的Toast消息。

1. 添加依赖

首先,在你的pubspec.yaml文件中添加native_toast插件的依赖:

dependencies:
  flutter:
    sdk: flutter
  native_toast: ^0.4.0  # 请检查最新版本号

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

2. 导入插件

在你需要显示Toast消息的Dart文件中导入native_toast插件:

import 'package:native_toast/native_toast.dart';

3. 使用插件

下面是一个简单的例子,展示了如何在按钮点击时显示一个Toast消息:

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

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

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

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Native Toast Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            ElevatedButton(
              onPressed: () {
                // 显示Toast消息
                NativeToast.showToast(
                  context: context,
                  message: 'Hello, this is a toast!',
                  position: ToastPosition.bottom, // 可选参数,默认是bottom
                  duration: ToastDuration.long, // 可选参数,默认是short
                );
              },
              child: Text('Show Toast'),
            ),
          ],
        ),
      ),
    );
  }
}

4. 运行应用

确保你的开发环境已经设置好,并且设备或模拟器已经连接。然后运行flutter run来启动你的应用。

注意事项

  • NativeToast.showToast方法的context参数必须是当前显示Toast的Widget的上下文。
  • position参数可以是ToastPosition.topToastPosition.bottom
  • duration参数可以是ToastDuration.short(通常2秒)或ToastDuration.long(通常3.5秒)。

这个示例展示了如何在Flutter中使用native_toast插件来显示本地通知。希望这能帮助你理解如何在你的项目中集成和使用这个插件。

回到顶部