顯示 snackbar

在某些操作發生時，短暫地通知使用者是很有幫助的。例如，當使用者在清單中滑動刪除一則訊息時，你可能會想要告知他們該訊息已被刪除。你甚至可能想要提供一個讓他們復原該操作的選項。

在 Material Design 中，這正是 SnackBar 的用途。本教學將透過以下步驟來實作 snackbar：

1. 建立 Scaffold。
2. 顯示 SnackBar。
3. 提供可選的操作。

當你開發遵循 Material Design 指南的應用程式時，應確保應用程式具有一致的視覺結構。在這個範例中，將 SnackBar 顯示在螢幕底部，且不會與其他重要元件 (Widget) 重疊，例如 FloatingActionButton。

Scaffold 元件，來自 material library，可建立這種視覺結構，並確保重要元件不會互相重疊。

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

在有了 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);

當 SnackBar 顯示時，你可能會希望提供一個操作給使用者。 例如，若使用者不小心刪除了訊息，他們可以透過 SnackBar 中的 action 來恢復該訊息。

以下是一個為 SnackBar 元件提供額外 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'),
      ),
    );
  }
}