Flutterでflutter_app_badgerを使い、アプリのホームアイコンにバッジを表示する

Flutterでアプリ開発をしている村松龍之介と申します。
（仕事ではiOSアプリのネイティブアプリ開発を行っています）

今回は、FlutterアプリにiPhoneやiPadではお馴染みのアイコンバッジを付けるためにパッケージを導入しましたので備忘録です。

flutter_app_badgerパッケージを導入する

簡単にアイコンバッジを付けられるパッケージがありますので、導入します。
flutter_app_badger | Flutter Package

pubspec.yamlを編集

dependencies:
	# 〜〜省略〜〜
  flutter_app_badger: ^1.1.2 # 導入時点で最新のバージョンを指定でOKだと思います。

iOS

iOSでバッジを表示するためには権限が必要なので以下をinfo.plistに追記します。

Android StudioやVS Codeでinfo.plistを開いて編集する場合

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
    <!-- ここから下を追加 -->
    <key>UIBackgroundModes</key>
    <array>
        <string>remote-notification</string>
    </array>
    <!-- ここまで -->
</dict>
</plist>

Xcodeでinfo.plistを（Property Listとして）開いて編集する場合

Required background modesを追加して、その一要素としてApp downloads content in response to push notificationsを追加します。

Android

On Android, no official API exists to show a badge in the launcher. But some devices (Samsung, HTC...) support the feature. Thanks to the Shortcut Badger library , ~ 16 launchers are supported.
（翻訳）Androidには、ランチャーにバッジを表示する公式のAPIはありません。ただし、一部のデバイス（Samsung、HTC ...）はこの機能をサポートしています。 Shortcut Badgerライブラリの おかげで、 最大 16個のランチャーがサポートされます。

Androidの場合は、対応する機種が限られますが、特にやらなきゃいけないこともないようです。
ちなみにPixel 3 Xlではバッジは表示されませんでした。

コード実装

バッジの表示・数字の更新

実装は思いのほか簡単です。
intを引数にして以下の関数を呼び出すことでバッジを表示できます。

FlutterAppBadger.updateBadgeCount(1);

上記の例では「1」を渡しているので、ホーム画面のアイコンに❶というようにバッジが表示されます。

doubleの場合はintに変換してから引数に渡しましょう。

0以下の数値を渡すことでバッジが表示されないことを確認しました。
マイナスの数値を渡してもバッジが表示されません。

バッジをサポートしている環境か調べる

Androidでは一部のデバイスしか対応していないこともあり、あらまじめバッジ機能をサポートしているか調べた方が良いですね。

FlutterAppBadger.isAppBadgeSupported();

上記の関数を実行することで、非同期で真偽値（bool）が返却されます。

上記の実装をメソッドにするなら以下のような感じでしょうか？

  /// 1以上の数値を渡すことでホーム画面のアイコンにバッジを表示する
  void setIconBadge({int number}) async {
    // バッジ表示機能に対応している場合のみ、バッジの数字を更新する
    if (await FlutterAppBadger.isAppBadgeSupported()) {
      FlutterAppBadger.updateBadgeCount(number ?? 0); // <-引数の`number`が`null`だった場合は`0`
    }
  }

iOSの場合、許可を得る必要がありますが、バッジの初回更新時に表示してくれます。

バッジを非表示にしたいとき

0以下の数値で更新することもできますが、意図的にバッジを非表示にしたいときは以下の関数でバッジが消した方が良さそうです。

FlutterAppBadger.removeBadge();

呼び出す場所

基本的に好きな場所で呼び出して良いかと思います。
僕の場合は、アプリのメイン画面で有給休暇の残日数を計算しており、バッジでその残日数を表示させたかったので、計算結果を引数に入れて使用しました。

蛇足

ご覧いただきありがとうございました！
蛇足ですが、Flutterアプリをリリースできたので良かったらインストールしてみてもらえると嬉しいです🙇‍♂️
iOS: ‎「レストル-有給休暇管理」をApp Storeで
Android: レストル-有給休暇管理 - Google Play のアプリ