[Flutter]Iconウェジェットにラベル(label)をつけるには？

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

Iconウェジェットにラベルをつける方法を紹介します。

方法

Iconウェジェットにラベルをつけるには、Columnウェジェットを使います。

具体的には、Columnの引数「children」に、TextウェジェットとIconウェジェットを指定します。

Column(
  children: [
    Text('ラベル'),
    Icon(/*Your Icon*/),
  ],
),

以下は、使用例です。

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            Column(
              mainAxisSize: MainAxisSize.min,
              children: [
                Text(
                  '設定',
                  style: TextStyle(fontSize: 50),
                ),
                Icon(
                  Icons.settings,
                  size: 100,
                ),
              ],
            ),
            Column(
              mainAxisSize: MainAxisSize.min,
              children: [
                Text(
                  '空気',
                  style: TextStyle(fontSize: 50),
                ),
                Icon(
                  Icons.air_outlined,
                  size: 100,
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }