Flutter弹出提示插件flutter_rr_toast的使用

Flutter弹出提示插件flutter_rr_toast的使用

概述

flutter_rr_toast 是一个功能丰富的 Flutter 提示库，它允许你在任何需要的地方轻松地显示各种类型的提示。其特点包括：

  • 支持显示文本、通知、加载动画（带图片或圆形进度条）等。
  • 可以自定义各种动画效果。
  • 支持创建弹窗或对话框小部件。
  • 允许弹出各种自定义提示，或者弹出符合 Flutter 代码规范的任意小部件。

在线演示

在线演示 （网页效果可能有偏差，实际效果以手机为准）

示例项目

示例项目

使用步骤

1. 在 pubspec.yaml 文件中添加依赖

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

dependencies:
     flutter_rr_toast: ^0.0.1 
#null safety

然后运行以下命令以安装依赖：

flutter pub get

2. 导入 RRToast 库

在需要使用 RRToast 的 Dart 文件中导入以下库：

import 'package:flutter_rr_toast/flutter_rr_toast.dart';

3. 初始化 RRToast

在 MaterialApp 中调用 RRToastInit 并注册路由观察器：

方法一：直接在 MaterialApp 中初始化

MaterialApp(
      title: 'RRToast Demo',
      builder: RRToastInit(), // 调用 RRToastInit
      navigatorObservers: [RRToastNavigatorObserver()], // 注册路由观察器
      home: XyzPage(),
  );

方法二：通过自定义构建函数初始化

final rrToastBuilder = RRToastInit();  // 调用 RRToastInit 

MaterialApp(
      title: 'RRToast Demo',
      builder: (context, child) {
        child = myBuilder(context,child);  // 自定义操作
        child = rrToastBuilder(context,child); 
        return child;
      }, 
      navigatorObservers: [RRToastNavigatorObserver()], // 注册路由观察器
      home: XyzPage(),
  );

注意：不要随意调整 RRToastInit 函数的调用位置。

4. 使用 RRToast

显示简单的文本提示

var cancel = RRToast.showText(text: "Hello, RRToast!");  // 弹出一个文本提示
...
cancel();  // 关闭提示

显示简单通知

var cancel = RRToast.showSimpleNotification(title: "通知标题");  // 弹出一个通知提示
...
cancel();  // 关闭提示

显示带图片的加载提示

var cancel = RRToast.showLoading(image: Image.asset('assets/img/loading_icon.png')); 
// 弹出一个带有图片的加载提示
...
cancel();  // 关闭提示

显示带圆形进度条的加载提示

var cancel = RRToast.showLoading(); 
// 弹出一个带有圆形进度条的加载提示
...
cancel();  // 关闭提示

显示附件提示

var cancel = RRToast.showAttachedWidget(
    attachedBuilder: (_) => Card(
          child: Padding(
            padding: const EdgeInsets.all(4.0),
            child: Icon(
              Icons.bookmark,
              color: Colors.blueAccent,
            ),
          ),
        ),
    duration: Duration(seconds: 2.5),  // 设置持续时间为 2.5 秒
    target: Offset(320, 320));  // 设置目标位置
...
cancel();  // 关闭提示

自定义 API

// 自定义通知提示
var cancelToast = RRToast.showCustomNotification(...);

// 自定义文本提示
var cancelToast = RRToast.showCustomText(...);

// 自定义加载提示
var cancelToast = RRToast.showCustomLoading(...);

// 自定义动画提示
var cancelToast = RRToast.showAnimationWidget(...);
...
cancel();  // 关闭提示

3.0 版本

以下是 3.x.x 版本的初始化方法：

MaterialApp(
      title: 'RRToast Demo',
      builder: RRToastInit(), 
      navigatorObservers: [RRToastNavigatorObserver()],
      home: XxxxPage(),
  );

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

1 回复

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


flutter_rr_toast 是一个用于在 Flutter 应用中显示 Toast 提示的插件。它提供了简单易用的 API，可以快速地在应用中显示短小的提示信息。

安装

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

dependencies:
  flutter:
    sdk: flutter
  flutter_rr_toast: ^1.0.0  # 请根据最新版本号进行更新

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

使用

1. 导入包

在需要使用 Toast 的 Dart 文件中导入 flutter_rr_toast 包：

import 'package:flutter_rr_toast/flutter_rr_toast.dart';

2. 显示 Toast

你可以使用 RrToast.show() 方法来显示 Toast。以下是一些常见的用法：

显示默认 Toast
RrToast.show("这是一个默认的 Toast 提示");
自定义 Toast 显示时间
RrToast.show("这是一个自定义显示时间的 Toast", duration: RrToast.lengthLong);

duration 参数有两个可选值：

  • RrToast.lengthShort：短时间显示（默认 2 秒）
  • RrToast.lengthLong：长时间显示（默认 3.5 秒）
自定义 Toast 位置
RrToast.show("这是一个自定义位置的 Toast", position: RrToast.bottom);

position 参数有三个可选值：

  • RrToast.top：显示在屏幕顶部
  • RrToast.center：显示在屏幕中间
  • RrToast.bottom：显示在屏幕底部（默认）
自定义 Toast 背景颜色和文字颜色
RrToast.show(
  "这是一个自定义颜色的 Toast",
  backgroundColor: Colors.blue,
  textColor: Colors.white,
);
自定义 Toast 图标
RrToast.show(
  "这是一个带图标的 Toast",
  icon: Icons.check,
  iconColor: Colors.green,
);

3. 取消 Toast

如果你想手动取消正在显示的 Toast，可以调用 RrToast.cancel() 方法：

RrToast.cancel();

示例代码

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

import 'package:flutter/material.dart';
import 'package:flutter_rr_toast/flutter_rr_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('Flutter RR Toast 示例'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              ElevatedButton(
                onPressed: () {
                  RrToast.show("这是一个默认的 Toast 提示");
                },
                child: Text("显示默认 Toast"),
              ),
              ElevatedButton(
                onPressed: () {
                  RrToast.show(
                    "这是一个自定义的 Toast",
                    duration: RrToast.lengthLong,
                    position: RrToast.center,
                    backgroundColor: Colors.blue,
                    textColor: Colors.white,
                    icon: Icons.check,
                    iconColor: Colors.green,
                  );
                },
                child: Text("显示自定义 Toast"),
              ),
              ElevatedButton(
                onPressed: () {
                  RrToast.cancel();
                },
                child: Text("取消 Toast"),
              ),
            ],
          ),
        ),
      ),
    );
  }
}
回到顶部