快速使用 Flutter 中的 SnackBar 和 Toast
目录
一、Snackbar
1. Snackbar 简介
2. Snackbar 的基本使用
3. 自定义 Snackbar
4. 使用 ScaffoldMessenger 更灵活地管理 Snackbar
二、Toast 使用方法
1. 添加依赖
2. 显示 Toast 消息
三、注意事项
相关推荐
在 Flutter 中，SnackBar 是 Material Design 风格的轻量级消息提示组件，而 Toast 则是 Android 平台特有的提示方式。
一、Snackbar
1. Snackbar 简介
Snackbar 是一种轻量级消息提示组件，通常出现在屏幕底部，用于向用户提供简要反馈，常见于操作成功提示、警告或错误通知等。
2. Snackbar 的基本使用
要显示一个 Snackbar，最简单的方法是使用 ScaffoldMessenger.of(context).showSnackBar()。
import 'dart:io';import 'package:flutter/material.dart';
import 'package:permission_handler/permission_handler.dart';class ScSnackBarPage extends StatefulWidget {const ScSnackBarPage({super.key});@overrideState<ScSnackBarPage> createState() => _ScSnackBarPageState();
}class _ScSnackBarPageState extends State<ScSnackBarPage> {@overrideWidget build(BuildContext context) {return Scaffold(body: Column(//垂直布局children: [SizedBox(height: 40,),ElevatedButton(onPressed: () => _showSnackbar(),child: const Text('弹出提示'),),]));}void _showSnackbar(){ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text('操作成功！'),duration: Duration(seconds: 2), // 显示时长),);}
}
3. 自定义 Snackbar
可以通过以下方式自定义 Snackbar 的外观和行为：
SnackBar customSnackBar = SnackBar(content: Text('网络连接失败', style: TextStyle(color: Colors.white)),backgroundColor: Colors.red,action: SnackBarAction(label: '重试',textColor: Colors.white,onPressed: () {// 处理重试逻辑},),
);
ScaffoldMessenger.of(context).showSnackBar(customSnackBar);
4. 使用 ScaffoldMessenger 更灵活地管理 Snackbar
Flutter 2.0 之后，推荐使用 ScaffoldMessenger 来管理 Snackbar，而不是 Scaffold.of(context)。
.....
class _ScSnackBarPageState extends State<ScSnackBarPage> {final messengerKey = GlobalKey<ScaffoldMessengerState>();@overrideWidget build(BuildContext context) {return MaterialApp(scaffoldMessengerKey: messengerKey,home: Scaffold(body: Column(//垂直布局children: [ElevatedButton(onPressed: () {messengerKey.currentState?.showSnackBar(SnackBar(content: Text('使用 ScaffoldMessengerKey 显示')),);},child: const Text('弹出 ScaffoldMessengerKey 提示'),),],),),);}
}
二、Toast 使用方法
Flutter 本身没有内置 Toast，但可以使用第三方库 fluttertoast。
1. 添加依赖
在 pubspec.yaml 中添加：
dependencies:fluttertoast: ^8.2.2
然后运行 flutter pub get 安装依赖。
2. 显示 Toast 消息
import 'package:fluttertoast/fluttertoast.dart';Fluttertoast.showToast(msg: "这是一个 Toast 提示",toastLength: Toast.LENGTH_SHORT, // 时长gravity: ToastGravity.BOTTOM, // 位置timeInSecForIosWeb: 1, // iOS/web 上的显示时长backgroundColor: Colors.black54,textColor: Colors.white,fontSize: 16.0
); 调用 showToast() 方法即可在界面上显示 Toast 提示。
三、注意事项
-
对于 Toast，Android 和 iOS 上的显示效果可能略有不同
-
在 Flutter 中，通常推荐使用 SnackBar 以获得更好的跨平台一致性
简单封装示例：
class ToastUtil {static void showSnackBar(BuildContext context, String message) {ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text(message)),);}static void showToast(String message) {Fluttertoast.showToast(msg: message,toastLength: Toast.LENGTH_SHORT,gravity: ToastGravity.BOTTOM,);}
}// 使用
ToastUtil.showSnackBar(context, "操作成功");
ToastUtil.showToast("操作成功");相关推荐
Flutter setState() 状态管理详细使用指南-CSDN博客文章浏览阅读1.7k次，点赞53次，收藏49次。在 Flutter 开发中，setState() 是管理 Widget 状态变化最基础的方法。它用于更新 StatefulWidget 中的 UI，使 Flutter 重新构建该 Widget 及其子组件。本文将详细介绍 setState() 的基本原理、使用方法，并通过代码示例展示如何正确使用 setState() 进行状态更新。此外，我们还会探讨 setState() 的局限性，以及在复杂应用中可能需要的更高级状态管理方案。https://shuaici.blog.csdn.net/article/details/146083853Flutter Container 组件详解-CSDN博客文章浏览阅读728次，点赞33次，收藏19次。Container是Flutter中最常用的多功能布局组件，集尺寸控制、装饰效果、对齐方式等多种功能于一体。它能设置固定尺寸或约束范围，添加背景色、圆角、阴影等装饰效果，控制内外边距，实现子组件对齐和旋转变换，还能制作卡片、圆形头像等复杂UI。
https://shuaici.blog.csdn.net/article/details/146083818