顯示 snackbars

步驟
1. 建立一個 Scaffold
2. 顯示一個 SnackBar
3. 提供一個附加的操作
互動式範例

在某些情況下，我們需要用方便且友好的方式告訴使用者發生了什麼。例如，當用戶滑動刪除清單中的一條訊息時，我們或許想提醒使用者訊息已經被刪除了，或者除了提醒之外，我們還可以提供一個撤銷的操作。

在 Material Design 中，用一個 SnackBar 就可以實現這個需求。請參見以下步驟：

步驟

建立一個 Scaffold
顯示一個 Scaffold
提供一個附加的操作

1. 建立一個 `Scaffold`

在建立遵循 Material Design 設計規範的應用時，我們希望應用可以有一個一致的視覺層次結構。當我們在螢幕的底部顯示一個 SnackBar 時，不能覆蓋其他重要的 widgets，比如 FloatingActionButton。

用 material library 中的 Scaffold widget 就可以建立一個一致的視覺層次結構，並且可以確保其他重要的 widgets 不會被覆蓋。

return MaterialApp(
  title: 'SnackBar Demo',
  home: Scaffold(
    appBar: AppBar(
      title: const Text('SnackBar Demo'),
    ),
    body: const SnackBarPage(),
  ),
);

2. 顯示一個 `SnackBar`

有了 Scaffold，我們就可以顯示一個 SnackBar 了。首先，我們需要先建立一個 SnackBar ，然後使用 ScaffoldMessenger 來顯示它。

const snackBar = SnackBar(
  content: Text('Yay! A SnackBar!'),
);

// Find the ScaffoldMessenger in the widget tree
// and use it to show a SnackBar.
ScaffoldMessenger.of(context).showSnackBar(snackBar);

3. 提供一個附加的操作

在某些情況下，我們可能想在顯示 SnackBar 的時候給使用者提供一個附加的操作。比如，當他們意外的刪除了一個訊息，我們可以提供一個撤銷更改的操作。

To achieve this, we can provide an additional action to the SnackBar widget.

這個例子裡，我們在建立 SnackBar widget 的時候提供一個附加的 action 引數。

final snackBar = SnackBar(
  content: const Text('Yay! A SnackBar!'),
  action: SnackBarAction(
    label: 'Undo',
    onPressed: () {
      // Some code to undo the change.
    },
  ),
);

互動式範例

import 'package:flutter/material.dart';

void main() => runApp(const SnackBarDemo());

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'SnackBar Demo',
      home: Scaffold(
        appBar: AppBar(
          title: const Text('SnackBar Demo'),
        ),
        body: const SnackBarPage(),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Center(
      child: ElevatedButton(
        onPressed: () {
          final snackBar = SnackBar(
            content: const Text('Yay! A SnackBar!'),
            action: SnackBarAction(
              label: 'Undo',
              onPressed: () {
                // Some code to undo the change.
              },
            ),
          );

          // Find the ScaffoldMessenger in the widget tree
          // and use it to show a SnackBar.
          ScaffoldMessenger.of(context).showSnackBar(snackBar);
        },
        child: const Text('Show SnackBar'),
      ),
    );
  }
}