Flutter原生吐司提示插件simple_native_toast的使用

Flutter原生吐司提示插件simple_native_toast的使用

simple_native_toast 是一个用于在 Flutter 应用中显示原生吐司提示的插件。通过这个插件,你可以轻松地向用户展示简短的信息提示。

开始使用

添加依赖

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

dependencies:
  simple_native_toast: ^x.x.x

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

示例代码

以下是一个完整的示例,展示了如何使用 simple_native_toast 插件来显示吐司提示:

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

import 'package:flutter/services.dart';
import 'package:simple_native_toast/simple_native_toast.dart';

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

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

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  String _platformVersion = '未知平台版本';
  final _simpleNativeToastPlugin = SimpleNativeToast();

  [@override](/user/override)
  void initState() {
    super.initState();
    initPlatformState();
  }

  // 初始化平台状态
  Future<void> initPlatformState() async {
    String platformVersion;
    // 平台消息可能是异步的,所以我们初始化在一个异步方法中
    try {
      platformVersion = await _simpleNativeToastPlugin.getPlatformVersion() ?? '未知平台版本';
    } on PlatformException {
      platformVersion = '获取平台版本失败';
    }

    // 如果小部件在异步平台消息还在飞行时被从树中移除,我们想要丢弃回复而不是调用setState来更新我们的不存在的外观
    if (!mounted) return;

    setState(() {
      _platformVersion = platformVersion;
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('插件示例应用'),
        ),
        body: Column(
          children: [
            Text('运行于: $_platformVersion\n'),
            ElevatedButton(
              onPressed: () {
                // 显示吐司提示
                _simpleNativeToastPlugin.showToast(
                  "Hello world from flutter !",
                );
              },
              child: const Text("显示吐司"),
            )
          ],
        ),
      ),
    );
  }
}

解释

  1. 导入必要的库

    import 'package:flutter/material.dart';
    import 'dart:async';
    import 'package:flutter/services.dart';
    import 'package:simple_native_toast/simple_native_toast.dart';
    
  2. 定义主应用类

    void main() {
      runApp(const MyApp());
    }
    
  3. 定义状态类

    class MyApp extends StatefulWidget {
      const MyApp({super.key});
    
      [@override](/user/override)
      State<MyApp> createState() => _MyAppState();
    }
    
  4. 初始化平台状态

    class _MyAppState extends State<MyApp> {
      String _platformVersion = '未知平台版本';
      final _simpleNativeToastPlugin = SimpleNativeToast();
    
      [@override](/user/override)
      void initState() {
        super.initState();
        initPlatformState();
      }
    
      Future<void> initPlatformState() async {
        String platformVersion;
        try {
          platformVersion = await _simpleNativeToastPlugin.getPlatformVersion() ?? '未知平台版本';
        } on PlatformException {
          platformVersion = '获取平台版本失败';
        }
        if (!mounted) return;
        setState(() {
          _platformVersion = platformVersion;
        });
      }
    
  5. 构建UI

    [@override](/user/override)
    Widget build(BuildContext context) {
      return MaterialApp(
        home: Scaffold(
          appBar: AppBar(
            title: const Text('插件示例应用'),
          ),
          body: Column(
            children: [
              Text('运行于: $_platformVersion\n'),
              ElevatedButton(
                onPressed: () {
                  _simpleNativeToastPlugin.showToast(
                    "Hello world from flutter !",
                  );
                },
                child: const Text("显示吐司"),
              )
            ],
          ),
        ),
      );
    }
    

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

1 回复

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


simple_native_toast 是一个 Flutter 插件,用于在 Android 和 iOS 上显示原生风格的吐司(Toast)提示。它提供了简单的 API,允许你在 Flutter 应用中轻松地显示短时间的消息提示。

安装插件

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

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

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

使用插件

1. 导入插件

在使用 simple_native_toast 之前,你需要在 Dart 文件中导入它:

import 'package:simple_native_toast/simple_native_toast.dart';

2. 显示吐司提示

simple_native_toast 提供了 showToast 方法来显示吐司提示。你可以指定消息内容、持续时间、位置等参数。

void showToastMessage() {
  SimpleNativeToast.showToast(
    message: 'Hello, Flutter!',  // 要显示的消息
    duration: ToastDuration.short,  // 持续时间,可以是 ToastDuration.short 或 ToastDuration.long
    position: ToastPosition.bottom,  // 位置,可以是 ToastPosition.bottom 或 ToastPosition.center
    textColor: Colors.white,  // 文本颜色
    backgroundColor: Colors.black,  // 背景颜色
  );
}

3. 调用方法

你可以在需要显示吐司提示的地方调用 showToastMessage 方法。例如,在按钮的 onPressed 回调中:

ElevatedButton(
  onPressed: showToastMessage,
  child: Text('Show Toast'),
)

参数说明

  • message: 要显示的文本消息。
  • duration: 吐司提示的持续时间,可以是 ToastDuration.shortToastDuration.long
  • position: 吐司提示的位置,可以是 ToastPosition.bottomToastPosition.center
  • textColor: 文本颜色。
  • backgroundColor: 背景颜色。

示例代码

以下是一个完整的示例代码,展示了如何在按钮点击时显示吐司提示:

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Simple Native Toast Example'),
        ),
        body: Center(
          child: ElevatedButton(
            onPressed: showToastMessage,
            child: Text('Show Toast'),
          ),
        ),
      ),
    );
  }

  void showToastMessage() {
    SimpleNativeToast.showToast(
      message: 'Hello, Flutter!',
      duration: ToastDuration.short,
      position: ToastPosition.bottom,
      textColor: Colors.white,
      backgroundColor: Colors.black,
    );
  }
}
回到顶部