[Flutter]アイコン(Icon)の上に数字を表示するには？

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

アイコンの上に数字を表示する方法を紹介します。

方法

アイコンの上に数字を表示する方法は２つあります。

Stack

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

StackのchildrenにIconウェジェット、数字を表示するTextウェジェットの順に指定します。

また、Alignを使ってTextウェジェットの位置を調整します。

SizedBox(
  height: 100,
  width: 100,
  child: Stack(
    children: [
      Icon(
        Icons.flutter_dash,
        size: 100,
        color: Colors.blue,
      ),
      Align(
        alignment: Alignment.topRight,
        child: CircleAvatar(
          child: Text(
            '3',
            style: TextStyle(
                fontWeight: FontWeight.bold, fontSize: 30),
          ),
          backgroundColor: Colors.pink,
          foregroundColor: Colors.white,
        ),
      )
    ],
  ),
)

Badges

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

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

dependencies:
  badges: ^2.0.1

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

import 'package:badges/badges.dart';

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

最後に、Badgeの引数「child」にIcon、「badgeContent」にTextウェジェットを使って、数字を指定します。

Badge(
  badgeContent: Text('3'),
  child: Icon(Icons.flutter_dash),
)

まとめ

アイコンの上に数字を表示するには、Stackもしくはbadgesパッケージを使います。