はじめに

こんにちは、今回は自作通知バッジについてです。

基本的に通知バッジを実装する際にはbadgesを使うのが一番丸いかと思いますが、、

このライブラリだとバッジのサイズが一定より小さくならないみたいで今回のプロジェクトの要件には満たなかったので自作しました。（めちゃ簡単）

小さくなる限度

Badge(
  badgeContent: const Text("3"),
  child: const Icon(Icons.notifications, size: 50,),
),

上記のsizeパラメータに任意の値を設定したいのですがこの値を１以下にしようとするとそれ以上サイズが変わりません。

おんなじような方に参考になれば幸いです。

概要

今回実装するのは上記のようなからり小さいタイプの通知になります。
（画像小さくてすみません。）

全コード

Stack(
   children: [
    const Icon(Icons.notifications_none_sharp,color: 
    blackColor,size: 35,),
             Positioned(
                 top: 0.5,
                 right: -0.5,
                 child: Container(
                   width: 5.0,
                   height: 5.0,
                   decoration: const BoxDecoration(
                     shape: BoxShape.circle,
                     color: Colors.red, // バッジの色を調整してください
                   ),
                 ),
               ),
             ],
           ),

解説

まずはcontinerで丸い点を作成します。

Container(
    width: 5.0,
    height: 5.0,
    decoration: const BoxDecoration(
    shape: BoxShape.circle,
    color: Colors.red, // バッジの色を調整してください
    ),

今度は Positionedでcontainerの位置を調整します。

  Positioned(
     top: 0.5,
     right: -0.5,
     child: Container(
        width: 5.0,
        height: 5.0,
        decoration: const BoxDecoration(
              shape: BoxShape.circle,
              color: Colors.red, // バッジの色を調整してください
                   ),
                 ),
               ),

positionedの座標は実際に表示する文字等によって変わってくるかと思いますので、各自で調整してください。

あとは実際に通知バッジをつけるwidgetに対してstackでネストしてあげるだけです。

後半に置いたwidgetの方が手前側に表示されるので、表示方法によっては、ネストする順番を逆にする方が適当になる場合もあります。