Affichage du badge de notification sur l'icône de la barre de navigation inférieure

Question

J'aimerais afficher un badge de notification (un marbre de couleur) dans le coin en haut à droite du widget Icon de BottomNavigationBar lorsqu'un nouveau message est arrivé dans l'onglet Boîte de réception. Il est similaire à https://developer.Android.com/preview/features/notification-badges.html mais dans mon cas, il est affiché dans l'application.

Des astuces pour peindre la superposition sur l'icône existante pour créer une classe d'icônes custom?

Answer 1

Oui. Cela peut être fait en empilant deux icônes en utilisant les widgets Stack et Positioned. 

      new BottomNavigationBarItem(
        title: new Text('Home'),
        icon: new Stack(
          children: <Widget>[
            new Icon(Icons.home),
            new Positioned(  // draw a red marble
              top: 0.0,
              right: 0.0,
              child: new Icon(Icons.brightness_1, size: 8.0, 
                color: Colors.redAccent),
            )
          ]
        ),
      )

Answer 2

Vous pouvez également imbriquer les piles. Par exemple, si vous souhaitez ajouter item_count sur l'icône shopping_cart, vous pouvez faire ceci:

icon: new Stack(
              children: <Widget>[
                new Icon(Icons.shopping_cart),
                new Positioned(
                  top: 1.0,
                  right: 0.0,
                  child: new Stack(
                    children: <Widget>[
                      new Icon(Icons.brightness_1,
                          size: 18.0, color: Colors.green[800]),
                      new Positioned(
                        top: 1.0,
                        right: 4.0,
                        child: new Text(item_count,
                            style: new TextStyle(
                                color: Colors.white,
                                fontSize: 15.0,
                                fontWeight: FontWeight.w500)),
                      )
                    ],
                  ),
                )
              ],
            )

Answer 3

Une autre variante de badge de comptage (implémentée avec Stack of Icon et enveloppée dans Container Text, qui s’étire lorsque le compteur augmente):

BottomNavigationBarItem(
  icon: new Stack(
    children: <Widget>[
      new Icon(Icons.notifications),
      new Positioned(
        right: 0,
        child: new Container(
          padding: EdgeInsets.all(1),
          decoration: new BoxDecoration(
            color: Colors.red,
            borderRadius: BorderRadius.circular(6),
          ),
          constraints: BoxConstraints(
            minWidth: 12,
            minHeight: 12,
          ),
          child: new Text(
            '$_counter',
            style: new TextStyle(
              color: Colors.white,
              fontSize: 8,
            ),
            textAlign: TextAlign.center,
          ),
        ),
      )
    ],
  ),
  title: Text('Notifications'),
),

 

Answer 4

J'utiliserais un Stack pour rendre la bille au-dessus de la Icon, en l'enveloppant d'une Positioned, Align ou FractionallySizedBox pour la positionner à votre guise.

Answer 5

new BottomNavigationBar(
      type: BottomNavigationBarType.fixed,
      fixedColor: const Color(0xFF2845E7),
      items: [
        new BottomNavigationBarItem(
          icon: new Icon(
            Icons.home,
          ),
          title: new Text(
            "Home",
          ),
        ),
        new BottomNavigationBarItem(
            icon: new Icon(
              Icons.call,
            ),
            title: new Text(
              "Calls",
            )),
        new BottomNavigationBarItem(
            icon: new Icon(
              Icons.camera_alt,
            ),
            title: new Text(
              "Camera",
            )),
        new BottomNavigationBarItem(
            icon: new Stack(children: <Widget>[
              new Icon(Icons.favorite),
              new Positioned(
                  top: -1.0,
                  right: -1.0,
                  child: new Stack(
                    children: <Widget>[
                      new Icon(
                        Icons.brightness_1,
                        size: 12.0,
                        color: const Color(0xFF2845E7),
                      ),
                    ],
                  ))
            ]),
            title: new Text(
              "Stories",
            )),
        new BottomNavigationBarItem(
            icon: new Icon(
              Icons.account_circle,
            ),
            title: new Text(
              "Contacts",
            )),
      ],
      onTap: (){},
      currentIndex: 0,
    ),