FlutterでSnackBarを表示する

はじめに

SnakBarについて調べたので、備忘録として記事に残しておきます。

基本

以下のようにshowSnackBarメソッドの引数にSnackBarを指定し、読み出すと表示される。

const snackBar = SnackBar(
  content: Text("Normal SnackBar!!"),
);
ScaffoldMessenger.of(context).showSnackBar(snackBar);

表示時間

Durationに指定した期間、画面に表示する。
指定しなかった場合は、デフォルトで４秒表示したら消える。

const snackBar = SnackBar(
  content: Text("Normal SnackBar!!"),
  duration: Duration(seconds: 1),
);

手動で消す

手動で消したい場合は以下のメソッドを呼べば消える。

ScaffoldMessenger.of(context).hideCurrentSnackBar();

SnackBarの表示は一個ずつになので、前のSnackBarが表示されている間、新しいSnackBarは表示されない。
なので、SnackBarが表示中に新しいのを表示したい場合、上のメソッドを呼ぶといい。

イベントを追加

actionにSnackBarActionを指定すると、イベントを追加できる。

final snackBar = SnackBar(
  content: const Text("Normal SnackBar!!"),
  action: SnackBarAction(
    label: "close",
    onPressed: () => ScaffoldMessenger.of(context).hideCurrentSnackBar(),
  ),
  duration: const Duration(seconds: 10),
);

色の変更

backgroundColorで背景色を変更可能

const snackBar = SnackBar(
  backgroundColor:　Colors.red,
  content: Text("Normal SnackBar!!"),
  duration: Duration(seconds: 1),
);

Padding

paddingでcontentへのPaddingを調整可能。
画像のように、高さが変わるので注意。

const snackBar = SnackBar(
  content: Text("Normal SnackBar!!"),
  duration: Duration(seconds: 10),
  padding: EdgeInsets.only(left: 100),
);

形状の変更

shapeにプロパティを設定すると形状を変えられる。

    final snackBar = SnackBar(
      content: const Text("Normal SnackBar!!"),
      duration: const Duration(seconds: 10),
      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
    );

設定できるのはShapeBorderを継承したクラスのみ。

継承しているのは下記のクラス。

• CircleBorder
• RoundedRectangleBorder
• ContinuousRectangleBorder
• BeveledRectangleBorder

下記のクラスも可能（下記のクラスをさらに継承しているクラスもあり、そのクラスも可能）

• BoxBorder
• InputBorder
• OutlinedBorder

横幅を変える

横幅を変えるにはmarginかwidthを指定する。
注意なのは、片方しか設定できないのと、設定するにはbehaviorにSnackBarBehavior.floatingを設定する必要があります。

final snackBar = SnackBar(
      content: const Text("Normal SnackBar!!"),
      duration: const Duration(seconds: 10),
      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
      margin: const EdgeInsets.only(left: 23, right: 23, bottom: 23),
      behavior: SnackBarBehavior.floating,
    );

SnackBarBehavior.floatingにするとFloatingActionButtonがあった場合、上に表示されてしまうようです。

以下の記事を見ると、Scaffoldをネストすれば解決できそうですが本記事の主旨とズレるため検証はしていません。

https://stackoverflow.com/questions/58830257/flutter-how-to-make-snackbar-to-not-push-floatingactionbutton-upward

さらにカスタマイズ

SnackBarのcontentにはテキストだけじゃなく、Widgetが指定できるので、Rowを使えば、IconButtonも配置できます。

final snackBar = SnackBar(
      backgroundColor: Colors.grey,
      content: Row(children: [
        const Text(
          "Show SnackBar!!",
          style: TextStyle(
            fontSize: 14,
            color: Colors.white,
          ),
        ),
        Expanded(
          child: Container(
            height: 0,
          ),
        ),
        Padding(
          padding: EdgeInsets.zero,
          child: SizedBox(
            height: 24,
            width: 24,
            child: IconButton(
              padding: EdgeInsets.zero,
              icon: const Icon(Icons.account_balance),
              onPressed: () {
                ScaffoldMessenger.of(context).hideCurrentSnackBar();
              },
            ),
          ),
        ),
      ]),
      duration: const Duration(seconds: 10),
      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
      margin: const EdgeInsets.only(left: 23, right: 23, bottom: 23),
      behavior: SnackBarBehavior.floating,
    );

参考文献