🔔

新しいSnackBarをすぐに表示する

2023/06/04に公開

Flutter

snackbar

tech

概要

FlutterのSnackBarを使用するとき、既にSnackBarがある状態だと、そのSnackBarが消えるまで次のSnackBarが表示されません。

これを既にSnackBarがある状態でも新しいSnackBarが表示されるように修正します

前提条件

・Flutter(dart)の基本的な書き方が分かる

バージョン

・Flutter 3.7.10

実装

修正前該当ソース

Column(
  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  children: [
    ElevatedButton(
      onPressed: () {
        ScaffoldMessenger.of(context)
          .showSnackBar(
            const SnackBar(
              content: Text("First Drawer"),
            )
          );
      },
      child: const Text("First Drawer"),
    ),
    ElevatedButton(
      onPressed: () {
        ScaffoldMessenger.of(context)
          .showSnackBar(
            const SnackBar(
              content: Text("Second Drawer"),
            )
          );
        },
      child: const Text("Second Drawer"),
    ),
  ],
),

修正前該当ソース

Column(
  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  children: [
    ElevatedButton(
      onPressed: () {
        ScaffoldMessenger.of(context)
          ..hideCurrentSnackBar()
          ..showSnackBar(
            const SnackBar(
              duration: Duration(milliseconds: 1500),
              content: Text("First Drawer"),
            )
          );
      },
      child: const Text("First Drawer"),
    ),
    ElevatedButton(
      onPressed: () {
        ScaffoldMessenger.of(context)
          ..hideCurrentSnackBar()
          ..showSnackBar(
            const SnackBar(
              duration: Duration(milliseconds: 1500),
              content: Text("Second Drawer"),
            )
          );
        },
      child: const Text("Second Drawer"),
    ),
  ],
),

サンプルコードの修正コミット

単純に

..hideCurrentSnackBar()

を追加してあげましょう

ちなみに

SnackBar(
  duration: Duration(milliseconds: 1500),
  content: Text("Second Drawer"),
)

SnackBar()のdurationを変更することで、SnackBarの表示時間を変更できます。
デフォルトは4000ms(4秒)なので、上記ソースは4秒→1.5秒に変更しています。

概要

前提条件

バージョン

実装

Discussion