【Flutter】Flutter 使用 fluttertoast 实现显示 Toast 消息

【Flutter】Flutter 使用 fluttertoast 实现显示 Toast 消息

文章目录

    • 一、前言
    • 二、安装和基础使用
    • 三、不同平台的支持情况
    • 四、如何自定义 Toast
    • 五、在实际业务中的应用
    • 六、完整的业务代码示例(基于 Web 端)
    • 七、总结

一、前言

在这篇文章中,我将与你分享如何在 Flutter 项目中使用 fluttertoast 包来显示 Toast 消息。

Toast 是一个简短的、非模态的消息提示框,它可以在应用的前端显示,不会打断用户的操作。fluttertoast 是一个非常受欢迎的 Flutter 包,用于在 Flutter 项目中轻松创建 Toast 消息。

本文的重点:

  • fluttertoast 包的基础使用方法
  • 如何自定义 Toast 的样式和内容
  • 在实际业务中如何使用 fluttertoast
  • 一个基于 Web 端的完整 Flutter 项目示例

版本信息:

  • Flutter 版本:3.10
  • Dart 版本:3.0
  • fluttertoast 包版本:8.2.2

你是否对成为 Flutter 高手充满渴望,想要掌握更多前沿技巧和最佳实践?现在,你的机会来了!

🚀 Flutter 从零到一:基础入门到应用上线全攻略 正在热烈招募参与者!

✅ 这个专栏不仅包括了全面的 Flutter 学习资源,还有实用的代码示例和深入的解析教程。
✅ 专栏内容会持续更新,价格也会随之上涨。现在加入,享受最优惠的价格,抓住属于你的机会!
✅ 想要与其他 Flutter 学习者互动交流吗?点击这里 加入我们的讨论群,一起成长、一起进步。

别再等待,让我们今天就启程,共同开启 Flutter 的精彩学习之旅吧!

二、安装和基础使用

首先,我们需要在项目中添加 fluttertoast 的依赖。打开你的 pubspec.yaml 文件,然后在 dependencies 下添加以下代码:

fluttertoast: ^8.2.2

然后,运行 flutter pub get 命令来安装新的依赖。

接下来,我们可以开始使用 fluttertoast 了。首先,确保你已经导入了这个包:

import 'package:fluttertoast/fluttertoast.dart';

现在,你可以使用以下代码来显示一个基础的 Toast 消息:

Fluttertoast.showToast(msg: "这是一个 Toast 消息",toastLength: Toast.LENGTH_SHORT,gravity: ToastGravity.CENTER,timeInSecForIosWeb: 1,backgroundColor: Colors.red,textColor: Colors.white,fontSize: 16.0
);

三、不同平台的支持情况

fluttertoast 支持 Android、iOS 和 Web 三个平台。但是,根据平台的不同,Toast 的显示方式和特性也有所不同。

  1. Android 和 iOS:这两个平台上的 Toast 支持不需要 BuildContext 和需要 BuildContext 两种方式。不需要 BuildContext 的方式有限的 UI 控制,而需要 BuildContext 的方式则提供了完全的 UI 控制。
  2. Web:Web 平台上的 Toast 使用了 Toastify-JS,因此它的特性和 Android、iOS 上的 Toast 有所不同。例如,Web 上的 Toast 只支持顶部和底部的显示位置。

这是小雨青年于 2023 年发布在 CSDN 的博客,由于目前采集站侵权行为猖獗,如果你不是在 CSDN 看到本文,麻烦你通过 CSDN 联系我,谢谢你的支持。

四、如何自定义 Toast

在 Flutter 中,我们有很多方式可以自定义 Toast 的样式和内容。fluttertoast 包也提供了丰富的参数供我们使用。

  1. 自定义文本和背景颜色
    你可以通过 backgroundColortextColor 参数来自定义 Toast 的背景颜色和文本颜色。
Fluttertoast.showToast(msg: "自定义背景和文本颜色",backgroundColor: Colors.blue,textColor: Colors.yellow,
);
  1. 自定义显示位置
    通过 gravity 参数,你可以控制 Toast 出现在屏幕的哪个位置。
Fluttertoast.showToast(msg: "我在屏幕顶部",gravity: ToastGravity.TOP,
);
  1. 自定义显示时间
    使用 timeInSecForIosWeb 参数,你可以设置 Toast 在屏幕上停留的时间。
Fluttertoast.showToast(msg: "我会停留 3 秒",timeInSecForIosWeb: 3,
);

五、在实际业务中的应用

Toast 在实际业务中有很多用途,比如用于显示操作成功或失败的提示、网络请求的状态等。

  1. 操作反馈
    当用户完成某个操作(如提交表单、删除条目等)后,你可以使用 Toast 来给出即时的反馈。
Fluttertoast.showToast(msg: "删除成功!",backgroundColor: Colors.green,textColor: Colors.white,
);
  1. 网络请求状态
    在进行网络请求时,你可以使用 Toast 来显示请求的状态,如“加载中”、“请求成功”或“请求失败”。
// 请求开始
Fluttertoast.showToast(msg: "加载中...",backgroundColor: Colors.blue,
);// 请求成功
Fluttertoast.showToast(msg: "请求成功!",backgroundColor: Colors.green,
);// 请求失败
Fluttertoast.showToast(msg: "请求失败,请重试!",backgroundColor: Colors.red,
);

六、完整的业务代码示例(基于 Web 端)

在这一节中,我将给出一个基于 Web 端的完整 Flutter 项目示例,展示如何在实际业务中使用 fluttertoast

首先,确保你的 Flutter 项目支持 Web 端。然后,按照第二节的步骤添加 fluttertoast 包的依赖。

接下来,我们创建一个简单的 Web 应用,其中包含一个按钮。点击这个按钮时,会显示一个 Toast 消息。

import 'package:flutter/material.dart';
import 'package:fluttertoast/fluttertoast.dart';void main() {runApp(MyApp());
}class MyApp extends StatelessWidget {Widget build(BuildContext context) {return MaterialApp(home: Scaffold(appBar: AppBar(title: Text('Flutter Toast Web 示例')),body: Center(child: ElevatedButton(onPressed: () {Fluttertoast.showToast(msg: "你点击了按钮!",toastLength: Toast.LENGTH_SHORT,gravity: ToastGravity.CENTER,timeInSecForIosWeb: 1,backgroundColor: Colors.red,textColor: Colors.white,fontSize: 16.0,);},child: Text('点击我'),),),),);}
}

运行这个 Web 应用,点击按钮,你就会看到一个 Toast 消息出现在屏幕中央。

七、总结

经过上面的介绍,我相信你已经对 fluttertoast 包有了深入的了解。Toast 是一个非常实用的 UI 元素,它可以为用户提供及时的反馈,增强应用的交互性。fluttertoast 包为 Flutter 开发者提供了一个简单而强大的工具,使我们能够轻松地在应用中添加 Toast 消息。

回顾一下我们学到的内容:

  • 如何在 Flutter 项目中安装和使用 fluttertoast 包。
  • 如何自定义 Toast 的样式和内容。
  • 在实际业务中如何使用 Toast 提供反馈。
  • 一个基于 Web 端的完整 Flutter 项目示例。

对 Flutter 感兴趣,渴望深入探索和学习吗?Flutter 从零到一:基础入门到应用上线全攻略 正是你的完美起点!

📘 在这个专栏中,你将发现丰富的 Flutter 学习资源,从代码示例到深入的技术解读,一应俱全。
🛠️ 想要了解如何用 Flutter 构建出色的应用吗?所有的秘诀和答案都在我们的专栏里等着你!
💰 别再犹豫,专栏内容将不断更新,价格也将逐渐上涨。现在就加入,享受最优惠的价格,开启你的 Flutter 探索之旅!

想了解更多?点击这里查看 Flutter Developer 101:入门小册 & 专栏指引

👥 还有,别忘了点击这里 加入我们的讨论群,与其他 Flutter 爱好者一起交流和学习,共同成长!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/112692.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

异步迭代器

一、什么是异步迭代器? 实现了 __aiter__() 和 __anext__() 方法的对象。__anext__ 必须返回一个 awaitable对象。async for 会处理异步迭代器的 __anext__() 方法所返回的可等待对象,直到其引发一个 StopAsyncIteration 异常。 二、实例 class Async…

QT 相关设置

目录 1.安装QT2.安装好之后需要做一些设置2.1 基本的字体及主题设置2.2 格式化美化代码插件设置 1.安装QT 具体教程不写了 2.安装好之后需要做一些设置 2.1 基本的字体及主题设置 进入选项 选择喜欢的主题 字号字体设置 2.2 格式化美化代码插件设置 先下载一个格式化插…

适配器设计模式

目录 一、适配器模式1.类适配器模式2.对象适配器模式3.接口适配器 二、适配器模式应用场景三、适配器模式的优缺点 一、适配器模式 B站:java架构师 定义:适配器模式把一个类的接口变换成客户端所期待的另一种接口,从而使原本因接口不匹配而…

Mysql 事物与存储引擎

MySQL事务 MySQL 事务主要用于处理操作量大,复杂度高的数据。比如说,在人员管理系统中, 要删除一个人员,即需要删除人员的基本资料,又需要删除和该人员相关的信息,如信箱, 文章等等。这样&#…

黑马点评环境搭建导入

一开始配置maven的时候,发现怎么都无法查看maven的版本,后来才知道是JAVA_HOME的问题,开头多了一个空格(因为我是直接复制过去的),然后搜网上通过命令行可以看到肉眼看不到的bug。 通过命令行的方式改正确后…

C++笔记之单例通过GetInstance传递参数

C笔记之单例通过GetInstance传递参数 code review! 文章目录 C笔记之单例通过GetInstance传递参数例1.普通指针的单例例2.结合智能指针和std::call_once例3.编译不通过的错误例子,在GetInstance内不可以使用std::make_shared来创建对象 例1.普通指针的单例 运行 …

会员管理系统实战开发教程06-会员充值

我们上篇讲解了会员开卡的操作,有了会员卡之后日常就是给会员进行充值,充值的逻辑是对余额进行累加,而且要记录充值的情况。 1 创建充值记录表 打开控制台,点击号创建数据源 输入数据源名称充值记录 点击编辑添加字段 先添加…

python的可哈希对象

一、介绍 在Python中,可哈希(hashable)是指一种对象类型,该类型的对象可以用作字典的键(keys)或集合(sets)的元素。可哈希的对象具有以下特点: 不可变性(Imm…

【C++】SLT——Vector详解

本片要分享的是关于STL中Vector的内容,Vector的内容于string非常相似,只要会使用string那么学习Vector时会非常流畅。 目录 1.vector介绍 2.vector的简单实用 2.1.简单的无参构造 ​编辑2.2.简单带参构造 2.3.迭代器区间初始化 2.4.vector的遍历 …

爬虫逆向实战(二十六)--某某学堂登录

一、数据接口分析 主页地址:某某学堂 1、抓包 通过抓包可以发现数据接口是Account/LoginPost 2、判断是否有加密参数 请求参数是否加密? 通过查看“载荷”模块可以发现pass是加密参数 请求头是否加密? 无响应是否加密? 无co…

想要搞懂接口测试和功能测试有什么区别,那就必须知道他们的基本原理

本文主要分为两个部分: 第一部分:主要从问题出发,引入接口测试的相关内容并与前端测试进行简单对比,总结两者之前的区别与联系。但该部分只交代了怎么做和如何做?并没有解释为什么要做? 第二部分&#xf…

VBA技术资料MF48:VBA_在Excel中将列号与字母转换

【分享成果,随喜正能量】除非自己的认知获得了改变和刷新,否则,人们常说的“顺应自己的内心”,顺的不过是一颗旧心,一颗惯性的,充满了各种习性的套路之心。与“顺应自己的内心”恰恰相反,人要用…

java+ssm+mysql农场信息管理系统

项目介绍: 本系统为基于jspssmmysql的农场信息管理系统,功能如下: 用户:注册登录系统,菜地信息管理,农作物信息管理,种植信息管理,客户信息管理,商家信息管理&#xff…

java项目mysql转postgresql

特殊函数 : mysql: find_in_set(?, ancestors) postgresql: ? ANY (string_to_array(ancestors,,)) mysql: date_format(t1.oper_time, %Y-%m-%d) postgresql: rksj::date to_char(inDate,YYYY-MM-DD) mysql&am…

十六、pikachu之SSRF

文章目录 1、SSRF概述2、SSRF(URL)3、SSRF(file_get_content) 1、SSRF概述 SSRF(Server-Side Request Forgery:服务器端请求伪造):其形成的原因大都是由于服务端提供了从其他服务器应用获取数据的功能&…

go:正确引入自己编写的包(如何在 Go 中正确引入自己编写的包)

前言 目录如下: 具体教程 1. 工作空间(我的是根目录)新建 go.work 文件 文件内容如下: go 1.21.0use (./tuchuang./tuchuang/testm ) 2. 添加go.mod文件 1. 包文件夹下 进入testm目录执行 go mod init testModule 2. 引用目…

文本匹配实战系列

引言 本系列文章开始介绍深度学习在文本匹配领域的应用,并且会尝试得到各种模型在给定的数据集上的表现。 深度文本匹配发展比较久,积累了很多文本匹配方法。也有很多的分类方式,一种分类方式是表示型和交互型。 表示型方法 表示型(repre…

R语言和Python用泊松过程扩展:霍克斯过程Hawkes Processes分析比特币交易数据订单到达自激过程时间序列...

全文下载链接:http://tecdat.cn/?p25880 本文描述了一个模型,该模型解释了交易的聚集到达,并展示了如何将其应用于比特币交易数据。这是很有趣的,原因很多。例如,对于交易来说,能够预测在短期内是否有更多…

易混淆的符号

C自学精简教程 目录(必读) &符号在C中有多个含义。 下面我们列出常见的3种&#xff0c;你都能分得清吗&#xff1f; #include <iostream> using namespace std;//传递引用类型的参数 pass by reference void fun(int& a)//(1) 这里的 & 表示参数a是引用类…

成集云 | 抖店客户静默下单催付数据同步钉钉 | 解决方案

源系统成集云目标系统 方案介绍 随着各品牌全渠道铺货&#xff0c;主播在平台上直播时客户下了订单后不能及时付款&#xff0c;第一时间客户收不到提醒&#xff0c;不仅造成了客户付款率下降&#xff0c;更大量消耗了企业的人力成本和经济。而成集云与钉钉深度合作&#xff0…