快速使用 Flutter 中的 SnackBar 和 Toast

目录

一、Snackbar

[1. Snackbar 简介](#1. Snackbar 简介)

[2. Snackbar 的基本使用](#2. Snackbar 的基本使用)

[3. 自定义 Snackbar](#3. 自定义 Snackbar)

[4. 使用 ScaffoldMessenger 更灵活地管理 Snackbar](#4. 使用 ScaffoldMessenger 更灵活地管理 Snackbar)

[二、Toast 使用方法](#二、Toast 使用方法)

[1. 添加依赖](#1. 添加依赖)

[2. 显示 Toast 消息](#2. 显示 Toast 消息)

三、注意事项

相关推荐


在 Flutter 中,SnackBar 是 Material Design 风格的轻量级消息提示组件,而 Toast 则是 Android 平台特有的提示方式。

一、Snackbar

1. Snackbar 简介

Snackbar 是一种轻量级消息提示组件,通常出现在屏幕底部,用于向用户提供简要反馈,常见于操作成功提示、警告或错误通知等。

2. Snackbar 的基本使用

要显示一个 Snackbar,最简单的方法是使用 ScaffoldMessenger.of(context).showSnackBar()

Dart 复制代码
import 'dart:io';

import 'package:flutter/material.dart';
import 'package:permission_handler/permission_handler.dart';

class ScSnackBarPage extends StatefulWidget {
  const ScSnackBarPage({super.key});

  @override
  State<ScSnackBarPage> createState() => _ScSnackBarPageState();
}

class _ScSnackBarPageState extends State<ScSnackBarPage> {
  @override
  Widget 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 的外观和行为:

Dart 复制代码
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)

Dart 复制代码
.....
class _ScSnackBarPageState extends State<ScSnackBarPage> {
  final messengerKey = GlobalKey<ScaffoldMessengerState>();

  @override
  Widget 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 中添加:

Dart 复制代码
dependencies:
  fluttertoast: ^8.2.2

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

2. 显示 Toast 消息

Dart 复制代码
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 提示。

三、注意事项

  1. 对于 Toast,Android 和 iOS 上的显示效果可能略有不同

  2. 在 Flutter 中,通常推荐使用 SnackBar 以获得更好的跨平台一致性

简单封装示例:

Dart 复制代码
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

相关推荐
一笑的小酒馆1 小时前
Android12去掉剪贴板复制成功的Toast
android
不自律的笨鸟2 小时前
iPhone 神级功能,3D Touch 回归!!!
ios·手机·iphone
一笑的小酒馆2 小时前
Android12App启动图标自适应
android
程序员江同学3 小时前
Kotlin 技术月报 | 2025 年 7 月
android·kotlin
某空m4 小时前
【Android】内容提供器
android
Greenland_125 小时前
Android 编译报错 Null extracted folder for artifact: xxx activity:1.8.0
android
_frank2225 小时前
kotlin使用mybatis plus lambdaQuery报错
开发语言·kotlin·mybatis
Bryce李小白5 小时前
Kotlin实现Retrofit风格的网络请求封装
网络·kotlin·retrofit
ZhuYuxi3335 小时前
【Kotlin】const 修饰的编译期常量
android·开发语言·kotlin
jzlhll1235 小时前
kotlin StateFlow的两个问题和使用场景探讨
kotlin·stateflow