[Flutter]SnackBarの左側(left)にアイコン(icon)を表示するには？

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

SnackBarのテキストの左側にアイコンを表示する方法を紹介します。

方法
使用例

方法

SnackBarの左側にアイコンを表示するには、Rowウェジェットを使います。

まず、SnackBarの引数「content」にRowウェジェットを指定します。

そして、Rowウェジェットの引数「children」のリストに、IconとTextを指定します。

SnackBar(
  content: Row(
    children: [
      Icon(/*アイコン*/),
      Text('テキスト'),
    ],
  ),
),

Rowを使えば、SnackBarの左側にアイコンを表示することが出来ます。

使用例

以下は、使用例です。

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        body: Center(
          child: ElevatedButton(
            onPressed: () {
              ScaffoldMessenger.of(context).showSnackBar(
                SnackBar(
                  content: Row(
                    children: [
                      Icon(
                        Icons.message,
                        color: Colors.white,
                      ),
                      SizedBox(width: 5),
                      Text('Snackbar message'),
                    ],
                  ),
                ),
              );
            },
            child: Text('Show'),
          ),
        ),
      ),
    );
  }