SnackBar

SnackBar 是页面底部的轻量级提示条。

基本用法

import 'package:flutter/material.dart';

class SnackBarBasicExample extends StatelessWidget {
  const SnackBarBasicExample({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('SnackBar 基本用法')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            // ─── ★ ScaffoldMessenger ──────────────
            ScaffoldMessenger.of(context).showSnackBar(
              // ─── ★ SnackBar ──────────────
              const SnackBar(
              // ─── ☆ SnackBar ──────────────
                content: Text('操作成功'),
                duration: Duration(seconds: 2),
              ),
            );
            // ─── ☆ ScaffoldMessenger ──────────────
          },
          child: const Text('显示 SnackBar'),
        ),
      ),
    );
  }
}

完整属性

import 'package:flutter/material.dart';

class SnackBarFullExample extends StatelessWidget {
  const SnackBarFullExample({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('SnackBar 完整属性')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            ScaffoldMessenger.of(context).showSnackBar(
              // ─── ★ SnackBar 完整属性 ──────────────
              SnackBar(
                content: const Text('已删除'),
                backgroundColor: Colors.red,         // 背景色
                // ─── ★ 浮动模式 ──────────────
                behavior: SnackBarBehavior.floating,
                // ─── ☆ 浮动模式 ──────────────
                shape: RoundedRectangleBorder(        // 圆角
                  borderRadius: BorderRadius.circular(8),
                ),
                margin: const EdgeInsets.all(16),    // 外边距（floating 模式下有效）
                elevation: 6,                        // 阴影
                duration: const Duration(seconds: 3), // 显示时长
                action: SnackBarAction(              // 操作按钮
                  label: '撤销',
                  onPressed: () { /* 撤销操作 */ },
                ),
                showCloseIcon: true,                 // 显示关闭按钮
                dismissDirection: DismissDirection.vertical,  // 滑动关闭方向
              ),
              // ─── ☆ SnackBar 完整属性 ──────────────
            );
          },
          child: const Text('显示完整 SnackBar'),
        ),
      ),
    );
  }
}

撤销操作

import 'package:flutter/material.dart';

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

  @override
  State<SnackBarUndoExample> createState() => _SnackBarUndoExampleState();
}

class _SnackBarUndoExampleState extends State<SnackBarUndoExample> {
  final List<String> _items = ['项目 A', '项目 B', '项目 C'];

  void _deleteItem(int index) {
    final item = _items.removeAt(index);

    ScaffoldMessenger.of(context).showSnackBar(
      SnackBar(
        content: Text('已删除 $item'),
        action: SnackBarAction(
          label: '撤销',
          onPressed: () {
            setState(() {
              _items.insert(index, item);  // 恢复
            });
          },
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('SnackBar 撤销')),
      body: ListView.builder(
        itemCount: _items.length,
        itemBuilder: (context, index) => ListTile(
          title: Text(_items[index]),
          trailing: IconButton(
            icon: const Icon(Icons.delete),
            onPressed: () => _deleteItem(index),
          ),
        ),
      ),
    );
  }
}

关闭当前 SnackBar

ScaffoldMessenger.of(context).hideCurrentSnackBar();
// 或
ScaffoldMessenger.of(context).clearSnackBars();  // 清除所有

SnackBar 的位置

// 默认在底部 fixed
SnackBar(behavior: SnackBarBehavior.fixed, ...)

// 浮动（距离底部有一定间距）
SnackBar(behavior: SnackBarBehavior.floating, ...)

Flutter 3.38+ 行为变更

重要变更

从 Flutter 3.38 开始，带有 action 的 SnackBar 不再自动消失，用户必须手动操作（点击按钮或手动关闭）后才会消失。无 action 的 SnackBar 仍会按 duration 自动消失。这一变更确保用户不会错过需要操作的重要提示。