[Flutter]数字付きの通知アイコンを表示するには？

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

数字付きの通知アイコンを表示する方法を紹介します。

方法
1. Stack
2. Badges
まとめ

方法

数字付きの通知アイコンを表示する方法は２つあります。

Stack

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

StackのchildrenにIconウェジェット、数字をテキストとするTextウェジェットの順に指定します。

そして、Alignを使ってTextウェジェットの位置を右上にします。

また、必要ならばContainerやCircleAvatarなどで背景色を設定します。

SizedBox(
  height: 100,
  width: 100,
  child: Stack(
    children: [
      Icon(
        Icons.notifications,
        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',
    style: TextStyle(color: Colors.white),
  ),
  child: Icon(
    Icons.notifications,
    size: 50,
  ),
  badgeColor: Colors.pink,//数字の背景色
  position: BadgePosition.topEnd(top: 0, end: 0),//位置
),