[Flutter]アイコン(Icon)の上にテキストを表示するには？

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

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

方法

アイコンの上にテキストを表示する方法は、２つあります。

Stack

１つは、Stackを使う方法です。

StackのchildrenにIconウェジェット、Textウェジェットの順に指定します。

また、Alignを使ってテキストの位置を調整します。

SizedBox(
  height: 100,
  width: 100,
  child: Stack(
    children: [
      Icon(
        Icons.flutter_dash,
        size: 100,
        color: Colors.blue,
      ),
      Align(
        alignment: Alignment.center,
        child: Text(
          'Flutter',
          style:
              TextStyle(fontWeight: FontWeight.bold, fontSize: 25),
        ),
      )
    ],
  ),
)

badges

もう１つは、「badges」パッケージを使う方法です。

まず、「badges」パッケージを「pubspec.yaml」で追加します。

dependencies:
  badges: ^2.0.1

そして、該当ファイルでパッケージをインポートします。

import 'package:badges/badges.dart';

次に、Badgeウェジェットを用意します。

最後に、Badgeの引数「child」にIcon、「badgeContent」にTextを指定します。

Badge(
  badgeContent: Text('Flutter'), //テキスト
  shape: BadgeShape.square, //形
  child: Icon(
    Icons.flutter_dash,
    size: 100,
  ),
)

まとめ

アイコンの上にテキストを表示するには、StackもしくはBadgesパッケージを使います。