[Flutter]SnackBar(スナックバー)に閉じるボタン(close button)を追加するには？

どうも、ちょげ(@chogetarou)です。

SnackBarを閉じるボタンを、SnackBarの右側に表示する方法を紹介します。

方法
使用例

方法

SnackBarに閉じるボタンを追加するには、引数「action」とScaffoldMessengerのhideCurrentSnackBarを使います。

まず、SnackBarの引数「action」にSnackBarActionを指定します。

SnackBarActionの引数「label」にテキスト、引数「onPressed」に関数を指定します。

そして、onPressedで呼び出す関数で、ScaffoldMessenger.of(context).hideCurrentSnackBarを指定します。

ScaffoldMessenger.of(context).showSnackBar(
  SnackBar(
    content: Text('Snackbar message'),
    action: SnackBarAction(
      label: '閉じる',
      onPressed: () {
        ScaffoldMessenger.of(context).hideCurrentSnackBar();
      },
    ),
  ),
);

ScaffoldMessenger.of(context).hideCurrentSnackBarを呼び出すことで、SnackBarを閉じることが出来ます。

使用例

以下は、使用例です。

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            ScaffoldMessenger.of(context).showSnackBar(
              SnackBar(
                content: Text('Snackbar message'),
                action: SnackBarAction(
                  label: '閉じる',
                  onPressed: () {
                  ScaffoldMessenger.of(context).hideCurrentSnackBar();
                  },
                ),
                duration: Duration(seconds: 5),
              ),
            );
          },
          child: Text('Show'),
        ),
      ),
    );
  }