快速使用 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

相关推荐
tq10862 分钟前
使用协程简化异步资源获取操作
kotlin·结构化并发
说私域1 小时前
互联网生态下赢家群体的崛起与“开源AI智能名片链动2+1模式S2B2C商城小程序“的赋能效应
人工智能·小程序·开源
花花鱼8 小时前
android studio 设置让开发更加的方便,比如可以查看变量的类型,参数的名称等等
android·ide·android studio
The_era_achievs_hero8 小时前
微信小程序71~80
微信小程序·小程序
alexhilton9 小时前
为什么你的App总是忘记所有事情
android·kotlin·android jetpack
!win !10 小时前
被老板怼后,我为uni-app项目引入环境标志
前端·小程序·uni-app
小蜜蜂嗡嗡12 小时前
flutter封装vlcplayer的控制器
前端·javascript·flutter
AirDroid_cn12 小时前
OPPO手机怎样被其他手机远程控制?两台OPPO手机如何相互远程控制?
android·windows·ios·智能手机·iphone·远程工作·远程控制
尊治12 小时前
手机电工仿真软件更新了
android
澄江静如练_13 小时前
微信小程序发体验版
微信小程序·小程序