Saltar al contenido

¿Cómo puedo agregar el número de artículo en el ícono del carrito en el ícono de la barra de aplicaciones en flutter? ¿Y cómo puedo hacer que se anime agregando un nuevo elemento?

Iván, parte de este equipo, nos hizo el favor de crear esta reseña porque conoce muy bien este tema.

Solución:

Se puede lograr con este fragmento de código en appBar.

appBar: new AppBar(

    actions: [

      new Padding(padding: const EdgeInsets.all(10.0),

        child: new Container(
          height: 150.0,
          width: 30.0,
          child: new GestureDetector(
            onTap: () 
              Navigator.of(context).push(
                  new MaterialPageRoute(
                      builder:(BuildContext context) =>
                      new CartItemsScreen()
                  )
              );
            ,

            child: new Stack(

              children: [
                new IconButton(icon: new Icon(Icons.shopping_cart,
                  color: Colors.white,),
                    onPressed: null,
                ),
                list.length ==0 ? new Container() :
                new Positioned(

                    child: new Stack(
                      children: [
                        new Icon(
                            Icons.brightness_1,
                            size: 20.0, color: Colors.green[800]),
                        new Positioned(
                            top: 3.0,
                            right: 4.0,
                            child: new Center(
                              child: new Text(
                                list.length.toString(),
                                style: new TextStyle(
                                    color: Colors.white,
                                    fontSize: 11.0,
                                    fontWeight: FontWeight.w500
                                ),
                              ),
                            )),


                      ],
                    )),

              ],
            ),
          )
        )

        ,)],

Puede usar el paquete de insignias.

Ejemplo:

Chip(
  backgroundColor: Colors.deepPurple,
  padding: EdgeInsets.all(0),
  label: Text('BADGE', style: TextStyle(color: Colors.white)),
),
Badge(
  badgeColor: Colors.deepPurple,
  shape: BadgeShape.square,
  borderRadius: 20,
  toAnimate: false,
  badgeContent:
      Text('BADGE', style: TextStyle(color: Colors.white)),
),

Si te sientes impulsado, tienes la libertad de dejar una reseña acerca de qué te ha gustado de esta crónica.

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *