【Flutter】メッセージ提示に必須！SnackBar入門

2023年7月16日
2023年7月16日
Widget
Flutter, widget, WidgetOfTheWeek

Widget

対象者

Flutterを使った開発経験はあるものの、SnackBarについて詳しく知りたいと考えているエンジニアや開発を学んでいる学生の方々
フロントエンドの開発スキルを向上させ、効率的にプロジェクトを進める方法を模索している方
チーム内での情報共有や指導の役割を担いたいと考えているエンジニアの方々

はじめに

Flutterを使って開発を進めているあなた、ユーザインタフェースに一工夫加えてみませんか？画面の下からスライドアップして表示されるメッセージバー、SnackBarがあれば、あなたのアプリは更にユーザーフレンドリーに。情報を簡潔に伝えるための強力なツールであるSnackBar、でもその使い方を詳しく知っていますか？

この記事では、SnackBarの基本的な実装から、カスタマイズ方法、更には他のFlutter要素との相互作用まで、一通りの知識を提供します。簡潔なソースコード例を通じて、具体的な実装方法を学び、理解を深めることができます。

SnackBarというのは、日本語で「スナックバー」という意味です。プログラムの世界では一般的に「一時的に表示する情報メッセージ」を示します。FlutterにおいてSnackBarは一時的なメッセージを表示するウィジェットです。そのため、ユーザーに対して短い通知や簡単な操作を提供することができます。

実際のアプリとしては、ユーザーが何かしらの操作を行った後に結果を通知するケースにSnackBarを使用します。例えば、データの保存が完了した際や、インターネット接続が途切れた時などに、「保存完了しました」や「インターネットに接続できません」といった情報をSnackBarを通じてユーザーに伝えることができます。

それでは、あなたが開発に立ち向かう際の新たな武器、SnackBarを手に入れるための旅を始めましょう。あなたのFlutter開発が更にスムーズに、そして効果的に進むことをお約束します。

FlutterのSnackBarとは？

今回は、Googleが開発したモバイルアプリケーション開発フレームワークFlutterにおける、一時的なメッセージを表示するためのウィジェット、SnackBarについて解説します。SnackBarの定義と役割について学び、具体的な使用例を通じてSnackBarの効果的な使い方を理解しましょう。

SnackBarの定義と役割

SnackBarは、一時的なメッセージをユーザーに伝えるためのツールとしてFlutterで用意されています。エラーメッセージの提示やアクションの結果の表示など、ユーザーに即座にフィードバックを提供する際に役立ちます。

具体的には、例えばアプリ内で何かしらのアクションを完了した際に「保存しました」といった短いメッセージを一時的に表示する、といった使い方が一般的です。また、エラーが発生した際にはその情報を伝えるためにも用いられます。そのため、SnackBarはユーザーエクスペリエンスを向上させる重要な要素と言えるでしょう。

SnackBarの使用例

ここでは、具体的なSnackBarの使用例を通じて、その基本的な実装方法を理解しましょう。以下に示すのは、単純なメッセージを表示するSnackBarの基本的な実装例です。

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

ScaffoldMessenger.of(context).showSnackBar(snackBar);

この例では、SnackBarウィジェットを生成し、その内容としてテキスト’Hello, Snackbar!’を指定しています。また、「Undo」ボタンを配置し、このボタンが押された際には指定のアクション（ここではコメント化されていますが、実際には何かしらのコードが記述されるでしょう）を実行します。そして、ScaffoldMessengerのshowSnackBarメソッドを用いてSnackBarを表示しています。

このように、SnackBarを使うことでアプリケーション内の特定のアクションに対するフィードバックをユーザーに即座に伝えることが可能です。SnackBarの有効な活用により、より良いユーザーエクスペリエンスを実現しましょう。

SnackBarの実装方法

SnackBarは非常に便利なツールですが、その便利さを最大限に活かすには正しい実装方法を理解することが重要です。ここでは、SnackBarの基本的なコード構造と、それを表示する方法、そして表示時間の設定について解説します。

SnackBarの基本的なコード構造

まずは基本となるコード構造を理解しましょう。SnackBarを実装するには主に2つの要素を定義する必要があります。1つ目はSnackBar自体で、2つ目はそれを表示するためのコードです。

SnackBarの実装は以下のように行います。

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

このように、SnackBarウィジェットを作成し、その中に表示するメッセージ（content）と、ユーザーがアクションを起こせるためのボタン（action）を定義します。

SnackBarを表示する方法

定義したSnackBarを実際に表示するためには、ScaffoldMessengerのshowSnackBarメソッドを使用します。具体的なコードは以下の通りです。

ScaffoldMessenger.of(context).showSnackBar(snackBar);

このように、SnackBarウィジェットを作成した後に、ScaffoldMessengerを通じてSnackBarを表示することができます。

SnackBarの表示時間の設定

SnackBarの表示時間を設定することも可能です。これにはSnackBarのdurationプロパティを使用します。以下に示すのは、SnackBarを3秒間表示する例です。

final snackBar = SnackBar(
  content: Text('Hello, Snackbar!'),
  duration: Duration(seconds: 3),
);

このように、durationプロパティに表示したい時間を秒数で指定することで、SnackBarの表示時間を制御することができます。

以上、SnackBarの基本的な実装方法と表示方法、表示時間の設定について解説しました。これらの知識を活用し、ユーザーにとってわかりやすく便利なアプリケーションを作成しましょう。

SnackBarのプロパティと動作

SnackBarは様々なプロパティを持ち、それらを通じて動作をカスタマイズすることができます。このセクションでは、SnackBarの出現・行動プロパティとbehaviorプロパティについて深堀りします。

SnackBarの出現・行動プロパティ

SnackBarの動作は、そのプロパティにより制御されます。例えば、durationプロパティはSnackBarがどのくらいの間表示されるかを決定し、actionプロパティを用いるとSnackBarにアクションボタンを追加することができます。以下のコードは、表示時間を3秒に設定し、’Undo’というラベルのアクションボタンを追加したSnackBarを示しています。

final snackBar = SnackBar(
  content: Text('Hello, SnackBar!'),
  duration: Duration(seconds: 3),
  action: SnackBarAction(
    label: 'Undo',
    onPressed: () {
      // some code to perform undo operation
    },
  ),
);

このようなプロパティの活用により、SnackBarはアプリケーションのユーザビリティを高める重要なツールとなります。

behaviorプロパティとSnackBarの位置

SnackBarのbehaviorプロパティを活用すると、SnackBarの表示位置を制御することができます。このプロパティはSnackBarBehavior型であり、デフォルトではSnackBarBehavior.fixedが設定されています。これはSnackBarを画面下部に表示します。しかし、SnackBarBehavior.floatingを指定するとSnackBarは画面の上に浮かんで表示されます。具体的には以下のようになります。

final snackBar = SnackBar(
  content: Text('Hello, SnackBar!'),
  behavior: SnackBarBehavior.floating,
);

このプロパティを使うことで、SnackBarの表示位置を任意に設定し、UI/UXの向上に貢献できます。

ここまで、SnackBarの基本的なプロパティと動作について見てきました。これらのプロパティを適切に活用することで、ユーザー体験を大幅に向上させることができます。次回は、SnackBarのテーマとスタイルのカスタマイズについて見ていきましょう。それぞれのアプリケーションに最適なSnackBarを設計してください。

SnackBarのテーマとスタイル

SnackBarはカスタマイズ性が高く、アプリケーションのテーマやスタイルに合わせてデザインすることが可能です。この章では、SnackBarの背景色のカスタマイズ方法や、長さと余白プロパティについて説明します。

SnackBarの背景色のカスタマイズ

SnackBarは背景色を自由にカスタマイズすることができます。これにより、アプリケーション全体のテーマカラーやブランドイメージに合わせて設定することが可能です。その実装は簡単で、SnackBarウィジェットのbackgroundColorプロパティを使用して設定します。

例えば、背景色を青に設定するには次のようにします：

final snackBar = SnackBar(
  content: Text('Hello, SnackBar!'),
  backgroundColor: Colors.blue,
);

このように、背景色の変更は一行のコードで実現できます。これはFlutterの強力なカスタマイズ性がもたらすメリットの一つです。

SnackBarの長さと余白プロパティ

SnackBarの長さと余白もまたカスタマイズ可能です。ただし、これらのプロパティは直接SnackBarに設定するのではなく、SnackBarを表示するScaffoldのSnackBarThemeを通じて設定します。具体的には、shape, behavior, margin, insetPaddingなどのプロパティを使用します。

以下に示すのは、SnackBarの長さを全画面にし、上下に10ピクセルの余白を設定した例です：

final theme = Theme.of(context).copyWith(
  snackBarTheme: SnackBarThemeData(
    behavior: SnackBarBehavior.floating,
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(0.0),
    ),
    insetPadding: EdgeInsets.symmetric(horizontal: 0.0, vertical: 10.0),
  ),
);

return MaterialApp(
  theme: theme,
  home: Scaffold(
    body: Center(
      child: RaisedButton(
        child: Text('Show SnackBar'),
        onPressed: () {
          Scaffold.of(context).showSnackBar(
            SnackBar(content: Text('Hello, SnackBar!')),
          );
        },
      ),
    ),
  ),
);

このように、SnackBarは非常にカスタマイズ性が高く、様々なデザインやレイアウトに対応できます。アプリケーションのテーマやブランドイメージに合わせて、適切なスタイルのSnackBarをデザインしてください。

SnackBarと他のFlutterの要素とのインタラクション

SnackBarは、その他のFlutterウィジェットとの相互作用を通じて、ユーザーへのフィードバックを提供する重要な役割を果たします。具体的には、Scaffoldウィジェットや、FloatingActionButton、BottomNavigationBarなどと一緒に使われることが多いです。

SnackBarとScaffoldウィジェット

SnackBarはScaffoldウィジェットに依存しています。これは、Scaffoldがアプリケーションのメインスクリーンを定義し、SnackBarがそのスクリーン内で表示されるからです。そのため、SnackBarを表示するには、まずScaffoldのコンテキストが必要になります。

具体的な実装例を見てみましょう：

Scaffold(
  appBar: AppBar(
    title: Text('SnackBar Example'),
  ),
  body: Center(
    child: ElevatedButton(
      onPressed: () {
        ScaffoldMessenger.of(context).showSnackBar(
          SnackBar(content: Text('Hello, SnackBar!')),
        );
      },
      child: Text('Show SnackBar'),
    ),
  ),
);

この例では、ElevatedButtonを押すと、Scaffoldのコンテキストを使用してSnackBarが表示されます。このように、ScaffoldはSnackBarを表示するための「舞台」のようなものです。

SnackBarとFloatingActionButtonやBottomNavigationBarとの関係

一方、SnackBarはFloatingActionButtonやBottomNavigationBarなどのUI要素とも相互作用します。たとえば、SnackBarが表示されると、FloatingActionButtonやBottomNavigationBarは自動的に上に移動して、SnackBarを覆わないようにします。

こちらが具体的なコードです：

Scaffold(
  appBar: AppBar(
    title: Text('SnackBar Example'),
  ),
  body: Center(
    child: ElevatedButton(
      onPressed: () {
        ScaffoldMessenger.of(context).showSnackBar(
          SnackBar(content: Text('Hello, SnackBar!')),
        );
      },
      child: Text('Show SnackBar'),
    ),
  ),
  floatingActionButton: FloatingActionButton(
    onPressed: () {},
    child: Icon(Icons.add),
  ),
  bottomNavigationBar: BottomNavigationBar(
    items: const <BottomNavigationBarItem>[
      BottomNavigationBarItem(
        icon: Icon(Icons.home),
        label: 'Home',
      ),
      BottomNavigationBarItem(
        icon: Icon(Icons.business),
        label: 'Business',
      ),
    ],
  ),
);

この例では、SnackBarが表示されると、FloatingActionButtonとBottomNavigationBarが自動的に上に移動します。これはSnackBarが「behavior」プロパティを持ち、それがSnackBarBehavior.floatingまたはSnackBarBehavior.fixedに設定されている場合に起こります。

つまり、SnackBarは他のFlutterウィジェットと密接に相互作用し、一緒に使われることで、ユーザーへのフィードバックを効果的に提供します。各UI要素との相互作用を理解し、適切に使用することが重要です。

SnackBarの応用例とトラブルシューティング

SnackBarはその基本的な使い方だけではなく、より発展的な使い方や応用例も多く存在します。特に、アクションの追加はSnackBarの有用性を高める一方で、表示問題のトラブルシューティングは開発の効率化に寄与します。

SnackBarのアクションの追加

SnackBarは、メッセージを表示するだけでなく、ユーザーに対するアクションも提供できます。例えば、「Undo」ボタンを追加することで、ユーザーが操作を元に戻すことができます。

ここでは、「Undo」アクションを追加したSnackBarの実装例を見てみましょう：

ScaffoldMessenger.of(context).showSnackBar(
  SnackBar(
    content: Text('Item removed'),
    action: SnackBarAction(
      label: 'Undo',
      onPressed: () {
        // Some code to undo the change.
      },
    ),
  ),
);

この例では、SnackBarに「Undo」ボタンが追加されています。ユーザーがこのボタンを押すと、onPressedに指定した処理が実行されます。

Q&A

Q1. SnackBarの表示時間を設定する方法は？

SnackBarの表示時間を設定するには、SnackBarのdurationプロパティを使用します。以下のコードは、SnackBarを5秒間表示する例です。

final snackBar = SnackBar(
  content: Text('Hello World!'),
  duration: Duration(seconds: 5),
);
ScaffoldMessenger.of(context).showSnackBar(snackBar);

Q2. SnackBarの背景色をカスタマイズする方法は？

SnackBarの背景色をカスタマイズするには、SnackBarのbackgroundColorプロパティを使用します。以下のコードは、SnackBarの背景色を赤に設定する例です。

final snackBar = SnackBar(
  content: Text('Hello World!'),
  backgroundColor: Colors.red,
);
ScaffoldMessenger.of(context).showSnackBar(snackBar);

Q3. SnackBarにアクションを追加する方法は？

SnackBarにアクションを追加するには、SnackBarのactionプロパティを使用します。以下のコードは、SnackBarに”Undo”というアクションを追加する例です。

final snackBar = SnackBar(
  content: Text('Hello World!'),
  action: SnackBarAction(
    label: 'Undo',
    onPressed: () {
      // Some code to undo the change.
    },
  ),
);
ScaffoldMessenger.of(context).showSnackBar(snackBar);

まとめ

これまでの学習で、FlutterのSnackBarについて深く理解しました。SnackBarは、一時的なメッセージをユーザーに表示するための効果的なツールであることがわかりました。その基本的なコード構造から実装方法、さらにはカスタマイズの仕方まで学ぶことができました。

また、SnackBarの表示時間や出現・行動プロパティを設定する方法も学びました。これにより、SnackBarをより使いやすく、ユーザー体験を向上させるための調整が可能であることを理解しました。

さらに、SnackBarのテーマとスタイル、具体的には背景色のカスタマイズや長さ、余白の調整方法についても理解しました。これにより、アプリの全体的なデザインに合わせてSnackBarを最適化できることがわかりました。

そして、SnackBarは他のFlutter要素、特にScaffoldウィジェットやFloatingActionButton、BottomNavigationBarとも密接に関連していることを理解しました。これらと適切に連携することで、より効果的なユーザーインターフェースを実現できます。

最後に、SnackBarの応用例とトラブルシューティングの方法も学びました。特に、アクションの追加方法や表示問題の解決方法は、現実の開発環境で非常に役立つことがわかりました。

参考

【Flutter】Snackbar(スナックバー)をちょっとお洒落にする

ソース(main.dartにコピペして動作確認用)

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final appBarTheme = Theme.of(context).copyWith(
      snackBarTheme: SnackBarThemeData(
        behavior: SnackBarBehavior.floating,
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(0.0),
        ),
        insetPadding: EdgeInsets.symmetric(horizontal: 0.0, vertical: 10.0),
      ),
    );

    return MaterialApp(
      title: 'Flutter SnackBar Demo',
      theme: ThemeData(
        useMaterial3: true,
        snackBarTheme: SnackBarThemeData(
          behavior: SnackBarBehavior.floating,
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(8.0),
          ),
          insetPadding: EdgeInsets.symmetric(horizontal: 8.0),
        ),
      ),
      home: MyHomePage(title: 'Flutter SnackBar Demo'),
    );
  }
}

class MyHomePage extends StatelessWidget {
  final String title;
  MyHomePage({Key? key, required this.title}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text(title),
        ),
        body: Center(
          child: FilledButton(
            child: Text('Show SnackBar'),
            onPressed: () {
              final snackBar = SnackBar(
                content: Text('This is a SnackBar message.'),
                backgroundColor: Colors.blueAccent,
                behavior: SnackBarBehavior.floating,
                action: SnackBarAction(
                  textColor: Colors.white,
                  label: 'Undo',
                  onPressed: () {
                    print('UNDO');
                  },
                ),
                duration: Duration(seconds: 3),
              );

              ScaffoldMessenger.of(context).showSnackBar(snackBar);
            },
          ),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () {
            final snackBar = SnackBar(
              content: Text('fiexed'),
              backgroundColor: Colors.blueAccent,
              behavior: SnackBarBehavior.fixed,
              duration: Duration(seconds: 1),
            );
            ScaffoldMessenger.of(context).showSnackBar(snackBar);
          },
          child: Icon(Icons.add),
        ));
  }
}

このFlutterアプリケーションのサンプルコードは、SnackBarウィジェットの基本的な使用方法を示しています。以下、コードの主な部分の説明をいたします。

MyApp クラス: MaterialAppウィジェットでアプリケーションのホーム画面を定義します。ここで、SnackBarのテーマ（SnackBarThemeData）を設定しています。SnackBarの挙動を浮かせるように指定（SnackBarBehavior.floating）、またSnackBarの形状や内側のパディングも設定しています。
MyHomePage クラス: Scaffoldウィジェットを使い、アプリバー、ボディ部分、およびフローティングアクションボタンを定義しています。
ボディ部分では、Centerウィジェットを使い、その子ウィジェットとしてFilledButtonウィジェットを配置しています。ElevatedButtonはユーザーがクリックしたときに、SnackBarを表示します。SnackBarはテキストメッセージ、背景色、動作、アクション、表示時間などを設定しています。アクションは、ユーザーがSnackBarに表示される ‘Undo’ ボタンを押すと、コンソールに ‘UNDO’ を出力します。
フローティングアクションボタン（FloatingActionButton）も同様に、ユーザーがクリックするとSnackBarを表示します。こちらのSnackBarは動作をSnackBarBehavior.fixedに指定し、表示時間を1秒に設定しています。

以上が、このサンプルコードの主な説明となります。