【Flutter】 badges 使い倒してみた！

本記事では badges というパッケージの紹介を行います。

未読の件数をアイコンの右上に丸と数字で表示させたいけど、どうすれば良いんだろう？

Stackでやってもいいけれど、面倒だわ！

上記のような疑問や悩みに答えてくれるパッケージこそが badgesです。
以下のようなUIが簡単に作成可能です。

基本的な使い方から、詳細設定まで解説します。
本記事さえ読めばbadgesを使いこなせること、間違いなしです！

ぜひ読んでみてください！

基本的な使い方
詳細設定
まとめ
参考
編集後記(2022/3/11)

基本的な使い方

badgesパッケージの基本的な使い方を紹介します。

以下の画像のようなUIを作成してみましょう。

パッケージのインストール

pubspec.yamlのdependences以下のように追記しパッケージをインストールします。

dependencies:
  badges: ^2.0.2

パッケージのバージョンは以下ページを見て最新バージョンを設定してください。

badges | Flutter package

A package for creating badges. Badges can be used for an additional marker for any widget, e.g. show a number of items in a shopping cart.

パッケージのインポート

badgesを利用するdartファイルにて、パッケージをインポートします。
以下のコードをdartファイルのimportの部分にに追加してください。

import 'package:badges/badges.dart';

badgesの追加

通知バッジをつけたいWidgetをBadge Widgetで囲みます。
Badge WidgetのbadgeContentプロパティに、バッジとして表示させたいWidgetを追加します。

以下の例は、メールアイコンに5というテキストを表示させた例です。

Badge(
  badgeContent: Text('5'),
  child: const Icon(
    Icons.mail,
    color: Colors.black,
    size: 50,
  ),
),

基本的な使い方は以上となります。
とても簡単に実装できますね。

詳細設定

badgesパッケージを使う利点は豊富な詳細設定にあります。
以下で詳細に解説していきます。

バッジの位置

子Widgetに対するバッジの位置を調整することが可能です。

position プロパティにBadgePosition を設定することで、
バッジの位置を調整できます。

BadgePositionにはデフォルトとして以下のコンストラクタが用意されています。

BadgePosition() : 引数でバッジの位置を調整可能
BadgePosition.bottomEnd() : バッジを右下に配置
BadgePosition.bottomStart() : バッジを左下に配置
BadgePosition.center() : バッジを中央に配置
BadgePosition.topEnd() : バッジを右上に配置
BadgePosition.topStart() : バッジを左下に配置

それぞれ、top,bottom,start,endの引数にて位置の調節が可能です。

左下に配置した例：

Badge(
  badgeContent: Text('0'),
  child: const Icon(
    Icons.mail,
    color: Colors.black,
    size:50,
  ),
  position: BadgePosition.bottomStart(),
),

また、alignment プロパティにて、
Badge Widgetの親Widgetに対する子Widgetの位置を調整することが可能です。

Container(
  width: 100,
  height: 100,
  color: Colors.green[100],
  child: Badge(
    badgeContent: Text('0'),
    child: const Icon(
      Icons.mail,
      color: Colors.black,
      size:50,
    ),
    alignment: Alignment.bottomCenter,
  ),
),

上の例からわかるように、
バッジは子Widgetに対する位置でなく、
親Widgetに対する位置で設定されます。

また、stackFit プロパティにて、
Badgeの子Widgetの大きさを親Widgetいっぱいに広げる等の指定が可能です。

バッジの色、形、枠線

バッジの色、形を変更することが可能です。

badgeColor プロパティにてバッジの色を変更可能です。

shape プロパティにて、バッジの形を変更可能です。

バッジの形の種類は以下の2種類です。

BadgeShape.circle : 円
BadgeShape.square : 長方形

また、borderRadiusを設定することにより、角丸の長方形を作成可能です。

borderSideを指定することで、バッジに枠線をつけることが可能です。

バッジ色を青色、角丸の長方形、枠線付きの例：

Badge(
  badgeContent: const Text('New'),
  child: const Icon(
    Icons.mail,
    color: Colors.black,
    size: 50,
  ),
  badgeColor: Colors.blue,
  shape: BadgeShape.square,
  borderRadius: BorderRadius.circular(10),
  borderSide: const BorderSide(width: 3),
),

また、gradientを設定することにより、色を徐々に変えることができます。

バッジ色を青色から赤色のグラデーション、長方形の例：

Badge(
  badgeContent: const Text('New'),
  child: const Icon(
    Icons.mail,
    color: Colors.black,
    size: 50,
  ),
  gradient: const LinearGradient(colors:[ Colors.blue,Colors.red]),
  shape: BadgeShape.square,
),

バッジの余白（パディング）

バッジの余白（パディング）を調整することが可能です。

padding プロパティにEdgeInsetsを設定することで、バッジの余白を調整可能です。

余白0を設定した例

Badge(
  badgeContent: const Text('New'),
  child: const Icon(
    Icons.mail,
    color: Colors.black,
    size: 50,
  ),
  padding: const EdgeInsets.all(0),
  shape: BadgeShape.square,
),