[Flutter]アイコン(Icon)にバッジを表示する方法

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

アイコンにバッジを表示する方法を紹介します。

方法

アイコンにバッジを表示するには、「badges」パッケージを使います。

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

dependencies:
  badges: ^2.0.1

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

import 'package:badges/badges.dart';

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

最後に、Badgeの引数「child」にIcon、「badgeContent」にバッジとして表示したウェジェットを指定します。

Badge(
  badgeContent: Text(
    '3',
    style: TextStyle(fontSize: 50, color: Colors.white),
  ),
  child: Icon(
    Icons.notifications,
    size: 100,
  ),
  badgeColor: Colors.blue, //バッジの背景色
)

これでアイコンにバッジを表示することが出来ます。