【Flutter】SnackBar|ScaffoldMessengerでスナックバー表示

今回はSnackBarの基本的な使い方を紹介します。

SnackBarを使えば画面下からショートテキストを表示できます。

\ 世界最大級のオンライン学習サービス /

目次

SnackBarの使い方

ElevatedButton(
  child: Text('Show SnackBar'),
  onPressed: () {
    const snackBar = SnackBar(
      content: Text('I am SnackBar!'),
    );

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

上記コードのようにSnackBarScaffoldMessengerと一緒に使われます。

SnakBarcontentでスナックバー上で表示するテキストを指定します。

表示時間を指定

SnackBar(
  content: Text('I am SnackBar!'),
  duration: Duration(seconds: 10),
);

dutationで表示時間を指定できます。

SnackBarのデフォルト表示時間は4秒です。

タップイベントを実装

SnackBar(
  content: Text('I am SnackBar!'),
  action: SnackBarAction(
    label: 'OK',
    onPressed: () {
      print('SnackBarActionをクリックしました。');
    },
  ),
);

actionでスナックバー上にボタンを配置してタップイベントを実装できます。

ボタンがタップされるとonPressedの処理が実行され、スナックバーが非表示されます。

参考

  • URLをコピーしました!
目次