当前位置：首页 > ai >正文

快速使用 Flutter 中的 SnackBar 和 Toast

ai 2025/6/17 15:10:56

一、Snackbar

1. Snackbar 简介

2. Snackbar 的基本使用

3. 自定义 Snackbar

4. 使用 ScaffoldMessenger 更灵活地管理 Snackbar

二、Toast 使用方法

1. 添加依赖

2. 显示 Toast 消息

三、注意事项

一、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