Flutter轻量级提示框插件easy_comp_utils_toast的使用

Flutter轻量级提示框插件easy_comp_utils_toast的使用

组件

  1. EasyCompUtilsToast

安装

  1. 在 pubspec.yaml 文件中添加最新版本（并运行 dart pub get）：
dependencies:
    easy_comp_utils_toast: ^0.0.2
  1. 初始化库时传入 [NavigatorState]：
import 'package:easy_comp_utils_toast/easy_comp_utils_toast.dart';

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  final navigatorKeyGlobal = GlobalKey<NavigatorState>();
  
  [@override](/user/override)
  Widget build(BuildContext context) {
    EasyCompUtilsToast.init(navigatorKeyGlobal);
    return MaterialApp(
        title: 'MyApp',
        navigatorKey: navigatorKeyGlobal,
    );
  }
}
  1. 导入包以便在您的 Flutter 应用中使用：
import 'package:easy_comp_utils_toast/easy_comp_utils_toast.dart';

使用方式

  • 使用组件 EasyCompUtilsToast。
import 'package:flutter/material.dart';
import 'package:easy_comp_utils_toast/easy_comp_utils_toast.dart';

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Container(
      child: Center(
        child: TextButton(
            child: const Text("测试"),
            onPressed: () async {
                EasyCompUtilsToast.success(
                    message: "成功!",
                );
                await Future.delayed(const Duration(seconds: 2));
                EasyCompUtilsToast.info(
                    message: "信息!",
                );
                await Future.delayed(const Duration(seconds: 2));
                EasyCompUtilsToast.error(
                    message: "错误!",
                );
            },
        ),
      ),
    );
  }
}

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

1 回复

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


easy_comp_utils_toast 是一个轻量级的 Flutter 提示框插件，用于在应用中显示简单的 toast 消息。Toast 是一种非侵入式的提示方式，通常用于向用户展示简短的反馈信息，而不会打断用户的操作。

以下是 easy_comp_utils_toast 的基本使用方法：

1. 添加依赖

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

dependencies:
  flutter:
    sdk: flutter
  easy_comp_utils_toast: ^版本号  # 请替换为最新的版本号

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

2. 导入包

在需要使用 toast 的 Dart 文件中导入 easy_comp_utils_toast：

import 'package:easy_comp_utils_toast/easy_comp_utils_toast.dart';

3. 显示 Toast

你可以使用 EasyCompUtilsToast.showToast 方法来显示 toast 消息。以下是一些常见的用法：

显示简单的文本 toast

EasyCompUtilsToast.showToast('这是一个简单的提示');

设置 toast 的显示时长

EasyCompUtilsToast.showToast('显示3秒钟', duration: Duration(seconds: 3));

设置 toast 的位置

你可以通过 position 参数来设置 toast 的显示位置：

EasyCompUtilsToast.showToast('顶部显示', position: EasyCompUtilsToastPosition.top);
EasyCompUtilsToast.showToast('底部显示', position: EasyCompUtilsToastPosition.bottom);
EasyCompUtilsToast.showToast('居中显示', position: EasyCompUtilsToastPosition.center);

自定义 toast 样式

你可以通过 backgroundColor 和 textStyle 参数来自定义 toast 的背景颜色和文本样式：

EasyCompUtilsToast.showToast(
  '自定义样式',
  backgroundColor: Colors.blue,
  textStyle: TextStyle(color: Colors.white, fontSize: 16.0),
);

4. 隐藏 Toast

如果你需要手动隐藏 toast，可以调用 EasyCompUtilsToast.hideToast 方法：

EasyCompUtilsToast.hideToast();

5. 示例代码

以下是一个完整的示例代码，展示了如何使用 easy_comp_utils_toast 插件：

import 'package:flutter/material.dart';
import 'package:easy_comp_utils_toast/easy_comp_utils_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('EasyCompUtilsToast 示例'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              ElevatedButton(
                onPressed: () {
                  EasyCompUtilsToast.showToast('这是一个简单的提示');
                },
                child: Text('显示简单 Toast'),
              ),
              ElevatedButton(
                onPressed: () {
                  EasyCompUtilsToast.showToast('显示3秒钟', duration: Duration(seconds: 3));
                },
                child: Text('显示3秒钟的 Toast'),
              ),
              ElevatedButton(
                onPressed: () {
                  EasyCompUtilsToast.showToast(
                    '自定义样式',
                    backgroundColor: Colors.blue,
                    textStyle: TextStyle(color: Colors.white, fontSize: 16.0),
                  );
                },
                child: Text('显示自定义样式的 Toast'),
              ),
              ElevatedButton(
                onPressed: () {
                  EasyCompUtilsToast.hideToast();
                },
                child: Text('隐藏 Toast'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}
回到顶部