【Flutter】snackbarの使い方【Toast】

本記事では、Flutterのsnackbarの使い方について説明します。

参考：Flutter公式 Display a snackbar

snackbarとは？

AndroidでいうToastのようなもので、特定のアクションが発生した際にユーザに対してメッセージを伝えることができるようなWidgetです。

iOSユーザの方はあまりピンとこないかもしれませんが、たとえば、ユーザがアイテムをスワイプして削除した際に、「削除されました」と通知したり、さらにそれを取り消すための「取り消しボタン」を表示できたりします。

使い方

Scaffoldを作成する

マテリアルライブラリのScaffoldは、マテリアルデザインのガイドラインにそって、視覚的な階層構造を自動で作成してくれます。snackbarを作成する前に、まずはScaffoldを作成します。

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

snackbarを作成、表示する

手順は簡単で、snackbarを定義し、ScaffoldManagerを使って呼び出すだけです。

// snackbarの作成
const snackBar = SnackBar(
  content: Text('スナックバーです'),
);

// WidgetツリーからScaffoldMessengerを見つけ、
// snackbarを呼び出す
ScaffoldMessenger.of(context).showSnackBar(snackBar);

オプションの追加

ただ単純に表示するだけであれば以上で処理は終わりですが、snackbarを通してユーザのアクションを受け取ることができます。具体的な例として、はじめに記載した「アイテムの削除」を取り消すようなボタンを表示するようなものがあります。

final snackBar = SnackBar(
  content: const Text('スナックバーです'),
  action: SnackBarAction(
    label: '取り消し',
    onPressed: () {
      // 「取り消し」ボタンが押された際に呼び出される
    },
  ),
);

最後に

以上でsnackbarの使い方についての説明は終了です。Flutter公式のsnackbarクラスにあるとおり、見た目を変更したりすることもできますので、デフォルトのデザインが他の画面に合わない、気に食わないような場合はレイアウトをカスタマイズしてみましょう。