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

三、注意事项

一、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 提示。

三、注意事项

对于 Toast，Android 和 iOS 上的显示效果可能略有不同
在 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 中的 SnackBar 和 Toast

一、Snackbar

1. Snackbar 简介

2. Snackbar 的基本使用

3. 自定义 Snackbar

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

二、Toast 使用方法

1. 添加依赖

2. 显示 Toast 消息

三、注意事项

相关推荐