Flutter通用提示框插件nex_common_toast的使用

Flutter通用提示框插件nex_common_toast的使用

nexever logo

一个通过oktoast包提供便捷方式展示可定制化吐司消息的Flutter插件。

功能特点

  • 可自定义参数的吐司消息，例如消息文本、背景颜色、位置、持续时间、文本样式等。
  • 轻松集成到Flutter应用中。

安装

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

dependencies:
  flutter:
    sdk: flutter
  nex_common_toast: <最新版本>

执行flutter pub get以安装该包。

使用方法

首先，在Dart文件中导入nex_common_toast包：

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

然后创建一个继承自ToastFile的类，并调用toastMsg方法来显示吐司消息。以下是一个完整的示例：

class MyToast extends ToastFile {
  // 显示吐司消息的方法
  void showToastMessage() {
    toastMsg(
      msg: "Hello, World!", // 吐司消息内容
      backgroundColor: Colors.blue, // 背景颜色
      position: ToastPosition.bottom, // 吐司位置
      duration: Duration(seconds: 3), // 持续时间
      textStyle: TextStyle(fontSize: 16.0, color: Colors.white), // 文本样式
      radius: 10.0, // 圆角半径
      textOverflow: TextOverflow.ellipsis, // 文本溢出处理方式
      textMaxLines: 2, // 最大行数
      textAlign: TextAlign.left, // 文本对齐方式
      textDirection: TextDirection.rtl, // 文本方向
    );
  }
}

在主程序中调用上述方法即可显示吐司消息：

void main() {
  // 创建MyToast实例并调用showToastMessage方法
  MyToast().showToastMessage();
  runApp(const Center(child: Text("Hello, World!")));
}

作者

Chandan Kumar Singh
Chandan Kumar Singh
Shubhpreet Rana
Shubhpreet Rana

示例代码

以下是完整的示例代码，运行后会在屏幕底部显示一条蓝色背景的吐司消息：

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

void main() {
  // 创建MyToast实例并调用showToastMessage方法
  MyToast().showToastMessage();
  runApp(const Center(child: Text("Hello, World!")));
}

class MyToast extends ToastFile {
  // 显示吐司消息的方法
  void showToastMessage() {
    toastMsg(
      msg: "Hello, World!", // 吐司消息内容
      backgroundColor: Colors.blue, // 背景颜色
      position: ToastPosition.bottom, // 吐司位置
      duration: Duration(seconds: 3), // 持续时间
      textStyle: TextStyle(fontSize: 16.0, color: Colors.white), // 文本样式
      radius: 10.0, // 圆角半径
      textOverflow: TextOverflow.ellipsis, // 文本溢出处理方式
      textMaxLines: 2, // 最大行数
      textAlign: TextAlign.left, // 文本对齐方式
      textDirection: TextDirection.rtl, // 文本方向
    );
  }
}

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

1 回复

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


nex_common_toast 是一个用于在 Flutter 应用中显示提示框（Toast）的插件。它可以帮助你快速地在应用中显示简短的提示信息，通常用于通知用户某些操作的结果或状态。

安装

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

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

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

基本用法

  1. 导入包：

    在你的 Dart 文件中导入 nex_common_toast 包：

    import 'package:nex_common_toast/nex_common_toast.dart';

  2. 显示 Toast：

    使用 NexCommonToast.showToast 方法来显示 Toast。你可以自定义 Toast 的文本、显示时长、位置等。

    NexCommonToast.showToast(
  context: context,
  message: '这是一个提示信息',
  duration: NexCommonToast.LENGTH_SHORT,
  gravity: NexCommonToast.CENTER,
);
    • context: 当前的 BuildContext。
    • message: 要显示的提示信息。
    • duration: Toast 显示的时长，可以是 NexCommonToast.LENGTH_SHORT 或 NexCommonToast.LENGTH_LONG。
    • gravity: Toast 显示的位置，可以是 NexCommonToast.TOP、NexCommonToast.CENTER 或 NexCommonToast.BOTTOM。

  3. 自定义样式：

    你还可以自定义 Toast 的背景颜色、文本颜色等：

    NexCommonToast.showToast(
  context: context,
  message: '自定义样式的提示信息',
  duration: NexCommonToast.LENGTH_LONG,
  gravity: NexCommonToast.BOTTOM,
  backgroundColor: Colors.red,
  textColor: Colors.white,
);
    • backgroundColor: Toast 的背景颜色。
    • textColor: Toast 文本的颜色。

示例代码

以下是一个完整的示例，展示如何在按钮点击时显示一个 Toast：

import 'package:flutter/material.dart';
import 'package:nex_common_toast/nex_common_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('NexCommonToast 示例'),
        ),
        body: Center(
          child: ElevatedButton(
            onPressed: () {
              NexCommonToast.showToast(
                context: context,
                message: '按钮被点击了！',
                duration: NexCommonToast.LENGTH_SHORT,
                gravity: NexCommonToast.BOTTOM,
                backgroundColor: Colors.blue,
                textColor: Colors.white,
              );
            },
            child: Text('显示 Toast'),
          ),
        ),
      ),
    );
  }
}
回到顶部