badgesとBadgeを比べる

はじめに

前者が、badges/badges(以下badges)の方で、後者がflutter/materialに含まれるものになります。

ここを読むとflutter本体には、3.7から登場しているようです。

もう少しバージョンが低めのflutterを使ってるプロジェクトで、upgradeしたい場合に問題になるかと思います。

もちろん共存は、できますが、少しでも依存関係を減らしたいなぁと思い、比較してみました。

デフォルトの状態で比べる

上が、flutterに組み込まれてるものです。下のがbadgesの方ですが、カウントの部分が悪目立ちしている気がします(個人の感想です)。

コードはこんな感じです。

class MyHomePageState extends State<MyHomePage> {
  int _counter = 1;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Badge.count(
              count: _counter,
              child: const Icon(
                Icons.settings,
              ),
            ),
            const SizedBox(
              height: 16.0,
            ),
            badges.Badge(
              badgeContent: Text('$_counter'),
              child: const Icon(Icons.settings),
            )
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
      ),
    );
  }
}

カウントが100になった場合の見た目はこんな感じです。

badgesの方は文字が被ってしまって、アイコンの判別が難しくなってます。

少しだけ見た目を近づけてみる

コードはこんな感じです。buildメソッドだけ抜粋しました。

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Badge.count(
              isLabelVisible: _counter != 0,
              textColor: Colors.black,
              backgroundColor: Colors.red,
              count: _counter,
              offset: const Offset(8.0, -8.0),
              child: const Icon(
                Icons.settings,
              ),
            ),
            const SizedBox(
              height: 16.0,
            ),
            badges.Badge(
              showBadge: _counter != 0,
              badgeContent: Text('$_counter'),
              child: const Icon(Icons.settings),
            )
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
      ),
    );
  }

offsetを調整したのと、文字色と、背景色を変えました。

あとは、アニメーションとか、文字が増えた場合の丸の形をどうするかくらいだと思います。

badgesのコードを読み解いていけば、flutterに組み込まれている方を使っても同じような動きにはできそうですが、長くなりそうなので今回はここまでにしておきたいと思います。m(_ _)m

上記で使ったコードの完全なサンプルは↓です。
https://github.com/na8esin/flutter3_practice/tree/846dbd9480d09d0b065e8f435860a7c6663f0279/lib/badge_sample