【Flutter 2.0】SnackBar(スナックバー)の使い方とカスタマイズ

はじめに

こんにちは。アプリ内のちょっとした通知にSnackBarを利用したくなりました。
v1.23.0-14.0.preより前までの書き方はdeprecatedになっており、
設定するデザインの例などを整理してみたかったので記事を書いてみました。

非推奨の書き方

新しい書き方

使い方

以下のようにボタンを押すと、下からHello!の文字とともにSnackBarが表示されます。
今はTextしか設定していないので、背景はデフォルトの黒色です。

ソースコード

分かりやすくクラスのプロパティに保持していますが、以下のような書き方でも大丈夫です。

利用できるメソッドについて

showSnackBar SnackBarを表示させる
hideCurrentSnackBar 現在表示しているSnackBarをアニメーション付きで隠す
clearSnackBars 現在表示しているSnackBarをアニメーション付きで隠す
removeCurrentSnackBar 現在表示しているSnackBarをアニメーションなしで即座に消す

clearSnackBarshideCurrentSnackBarの違いを以下のサンプルで試してみましたが、動作の違いが分かりませんでした…

デザインをカスタマイズする

以下に色々なデザインのパターンを載せてみたいと思います。参考になれば幸いです。

Flutterのサンプル風

背景色変更と角丸

高さ変更とボタン配置

さいごに

今回は、SnackBarについて書いてみました。ユーザに向けるアラートUIに関しては、SnackBarToastも、iOSには無いので、少し違和感がありましたが、簡単に実装ができて便利でした。
見て頂いてありがとうございます。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です