37.Flutter 零基础入门（三十七）：SnackBar 与提示信息 —— 页面反馈与用户交互必学

Flutter 零基础入门（三十七）：SnackBar 与提示信息 ------ 页面反馈与用户交互必学

到目前为止，你已经可以：

写动态页面（StatefulWidget + setState）
处理异步操作（Future / async / await）
表单校验（Form / TextFormField）

但如果你的 App 没有任何 操作反馈，用户体验会非常差：

点击按钮没反应 → 用户疑惑
数据保存成功没提示 → 用户不确定
表单校验错误 → 用户不知道哪里错

Flutter 提供了 SnackBar / AlertDialog / Toast 来解决这些问题。

一、SnackBar：页面底部提示信息

1️⃣ 最简单的 SnackBar

dart 复制代码

ScaffoldMessenger.of(context).showSnackBar(
  SnackBar(content: Text('操作成功')),
);

📌 特点：

出现在页面底部
自动消失
适合短时提示

2️⃣ 完整示例

复制代码

ElevatedButton(
  onPressed: () {
    ScaffoldMessenger.of(context).showSnackBar(
      SnackBar(
        content: Text('保存成功'),
        duration: Duration(seconds: 2),
      ),
    );
  },
  child: Text('显示 SnackBar'),
)

📌 参数说明：

content → 显示内容
duration → 显示时长
backgroundColor → 背景色可自定义

二、SnackBar 与异步操作结合

复制代码

ElevatedButton(
  onPressed: () async {
    await Future.delayed(Duration(seconds: 2));
    ScaffoldMessenger.of(context).showSnackBar(
      SnackBar(content: Text('异步操作完成')),
    );
  },
  child: Text('异步提示'),
)

📌 异步完成后提示用户操作结果 → UX 更友好

三、SnackBar 进阶属性

复制代码

SnackBar(
  content: Text('操作成功'),
  duration: Duration(seconds: 3),
  backgroundColor: Colors.green,
  action: SnackBarAction(
    label: '撤销',
    onPressed: () {
      print('用户点击撤销');
    },
    textColor: Colors.white,
  ),
)

action → 提供按钮操作，例如撤销、重试
backgroundColor → 自定义颜色

四、AlertDialog：弹窗提示

1️⃣ 简单提示框

复制代码

showDialog(
  context: context,
  builder: (context) {
    return AlertDialog(
      title: Text('提示'),
      content: Text('确定要删除吗？'),
      actions: [
        TextButton(
          onPressed: () => Navigator.pop(context),
          child: Text('取消'),
        ),
        TextButton(
          onPressed: () {
            print('删除操作');
            Navigator.pop(context);
          },
          child: Text('确定'),
        ),
      ],
    );
  },
);

📌 特点：

弹出在页面中央
阻塞操作（必须选择）
常用于确认、警告

五、SnackBar vs AlertDialog

组件	适用场景	特点
SnackBar	提示操作结果	非阻塞，短时显示
AlertDialog	重要确认 / 提醒	阻塞用户操作，需要响应

六、用户操作反馈示例

假设表单提交后：

复制代码

if (_formKey.currentState!.validate()) {
  // 异步提交
  await Future.delayed(Duration(seconds: 1));
  ScaffoldMessenger.of(context).showSnackBar(
    SnackBar(content: Text('提交成功')),
  );
} else {
  ScaffoldMessenger.of(context).showSnackBar(
    SnackBar(content: Text('请检查表单信息')),
  );
}

📌 用户体验大幅提升：

成功 → 正面反馈
错误 → 提示检查

七、常见坑

❌ ScaffoldMessenger 用错 context → SnackBar 不显示

❌ 没设置 duration → 默认太短或太长

❌ 弹窗内直接调用异步操作导致关闭异常

❌ 过度使用弹窗 → 用户疲劳

📌 建议：

SnackBar → 快速提示
AlertDialog → 确认 / 阻塞操作

八、本篇你真正掌握了什么？

你已经学会：

SnackBar 基础用法
SnackBar action 按钮
异步操作完成提示
AlertDialog 弹窗
提升用户操作反馈与 UX

📌 到这里为止：

你的 App 已经具备"用户友好提示能力"

九、一句话总结

SnackBar 快速提示
AlertDialog 重要确认
用户操作立即反馈 = 好体验

🔜 下一篇预告

《Flutter 零基础入门（三十八）：网络请求实战 http / dio ------ 获取列表与刷新 UI》

下一篇我们将学习：

Flutter 网络请求基础
http / dio 调用
异步更新 UI
列表数据加载与刷新

🚀 开始真正获取远程数据