🌊

【Flutter】スナックバー表示で手短にユーザーへのフィードバック

に公開
Flutter
Dart
UX
tech

はじめに

本記事では、Flutterにおけるスナックバーの実装方法を解説します。単に表示するだけでなく、現代のFlutter開発で推奨されるScaffoldMessengerを使った正しい管理の仕組みや、「元に戻す」ボタンなどのアクションを追加する方法まで、整理しました。

参考

https://docs.flutter.dev/cookbook/design/snackbars

スナックバーとは

アプリやWeb UIで 画面下部に一時的に表示される通知メッセージのことです。

ユーザーの操作に対して「今こういうことが起きたよ」というフィードバックを伝えるために使われます。

特徴

特徴 説明
一時的に表示 数秒で自動的に消える
画面の一部分に表示 通常は画面下部（右・中央・左など）
状態の通知 保存完了／削除／ネットワークエラーなど
最小限の存在感 モーダルダイアログほど主張が強くない
アクション付きの場合も Undo（元に戻す）ボタンなど

シンプルな実装例

ScaffoldMessenger.of(context) は、context（現在地）から親方向（祖先）に向かってツリーを遡り、一番近くにある ScaffoldMessenger というウィジェットを探しに行きます。

.showSnackBar(...) メソッドは、単に表示するだけではありません。もし既に別のSnackBarが表示されていた場合、新しいSnackBarをすぐに上書きせず、内部のリスト（キュー）に追加して待機させます。前のものが消えたら、次を表示するようスケジュール管理を行います。

SnackBar(...) は「背景色はこれ、テキストはこれ、時間はこれ」という設定情報をまとめた設計図（Widgetクラスのインスタンス）です。

ElevatedButton(
  onPressed: () {
    ScaffoldMessenger.of(
      context,
    ).showSnackBar(SnackBar(content: Text('表示内容')));
  },
  child: Text('スナックバー表示ボタン'),
),

スナックバー内に操作を配置

SnackBar ウィジェットの中にある action: が、メッセージの右側にボタンを置くための専用の場所（スロット）です。

ここには普通のボタン（ElevatedButton等）は置けません。必ずスナックバー専用の SnackBarAction ウィジェットを使用します。

  • label: ボタンの文字（例：「元に戻す」）
  • onPressed: タップ時の処理

SnackBarAction のボタンが押されると、定義した onPressed の処理が実行されるのと同時に、スナックバー自体が即座に閉じられます（これはFlutterが自動でやってくれます）。

ElevatedButton(
  onPressed: () {
    ScaffoldMessenger.of(context).showSnackBar(
      SnackBar(
        content: Text('表示内容'),
        action: SnackBarAction(
          label: '元に戻す',
          onPressed: () {
            // ここに元に戻す処理を書く
            print('元に戻しました');
          },
        ),
      ),
    );
  },
  child: Text('スナックバー表示ボタン'),
),

おわりに

FlutterにおけるSnackBar（スナックバー）の実装について、基本から内部の仕組みまで解説しました。

重要なポイントは、ScaffoldMessengerが「通知係」として機能し、メッセージの表示順序（キュー）を適切に管理してくれている点です。これにより、連続して通知が発生しても以前の通知が即座に消えることなく、ユーザーは情報を順を追って確認できます。

スナックバーは、ダイアログのようにユーザーの操作を強制的に中断させないため、アプリの体験（UX）を損なわずに情報を伝える手段として非常に優秀です。特にSnackBarActionを用いた「元に戻す（Undo）」機能は、ユーザーに安心感を与えます。

Discussion