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

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

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

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

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

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

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

基本的な使い方

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

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

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

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

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,
),

アニメーション

Badgeの表示が変わった時など、アニメーションをつけることができます。

toAnimate プロパティでアニメーションのオンオフを設定できます。
(デフォルトはtrue, オンです)

また、animationType プロパティでアニメーションの種類を設定します。

アニメーションの種類は以下の3種類です。

  • BadgeAnimationType.slide :スライドアニメーション(デフォルト)
  • BadgeAnimationType.scale :バッジがだんだん大きくなるアニメーション
  • BadgeAnimationType.fade :フェードインアニメーション

以下のページにそれぞれのアニメーションのgifがあるので、実際の動きはこちらをご覧ください。

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.

また、animationDuration プロパティでアニメーションの秒数を設定できます。

その他設定

その他、さらに細かい設定について解説します。

バッジの影

バッジの影の付き具合を調整することが可能です。

elevation プロパティにて影を無くしたり、濃くしたりできます。

elevation 0の例:

バッジのタップ判定

バッジのタップ判定をオンオフすることができます。

ignorePointer プロパティにtrueを設定することで、バッジのタップ判定が無くなります。

バッジの表示非表示

バッジの表示非表示をプロパティにてコントロールできます。

showBadge プロパティにfalseを設定することで、バッジを非表示にすることができます。

まとめ

本記事では badges というパッケージの紹介を行いました。
基本的な使い方から、詳細設定まで解説していきました。

バッジはSNS系アプリを作成するにあたって必須と言っても過言ではない、
重要な実装だと思います。
badgesパッケージを使えばバッジ周りで色々な調整ができるため、かなり有用です。
ぜひ使ってみてください。

本記事があなたのアプリ開発の一助となれば幸いです。

Flutterを一緒に学んでみませんか?
Flutter エンジニアに特化した学習コミュニティ、Flutter大学への入会は、
以下の画像リンクから。



参考

編集後記(2022/3/11)

本記事では、任意のWidgetにバッジをつけるパッケージ、
badgesを紹介しました。

Flutterはオープンソースなので、パッケージのコードも見れる物が多いです。
今回紹介するにあたって、badgesパッケージの内部のコードを見たのですが、
条件分岐の仕方や書き方など、多くの学びがありました。

また、パッケージのコードを読んでいると、
「ここおかしくない?」だったり、
「こここうした方が良くない?」だったりに気づくことがあります。

これこそ、コントリビュートのチャンスです。
OSSのコントリビュートは実力を上げるチャンスですし、
GitHubを見る人から高評価を得られます。

内部コードのリーディングは上記のように色々とメリットがあります。
あなたも気になるWidgetや良く使うWidgetのコードを読んでみてはいかがでしょうか。
きっとFlutter力が高まるはずです。

週刊Flutter大学では、Flutterに関する技術記事、Flutter大学についての紹介記事を投稿していきます。
記事の更新情報はFlutter大学Twitterにて告知します。
ぜひぜひフォローをお願いいたします。

タイトルとURLをコピーしました