La guía o código que encontrarás en este post es la solución más fácil y efectiva que encontramos a esta inquietud o problema.
Solución:
Puede cambiar el icono comprobando que el índice actual sea igual al índice de BottomNavigationBarItem índice.
ejemplo sencillo con static valores de índice:
bottomNavigationBar : new BottomNavigationBar(
currentIndex: index,
onTap: (int index)
setState(()
this.index = index;
);
_navigateToScreens(index);
,
type: BottomNavigationBarType.fixed,
items: [
new BottomNavigationBarItem(
backgroundColor: Colors.white,
icon: index==0?new Image.asset('images/1.0x/icon1.png'):new Image.asset('images/1.0x/newIcon.png'),
title: new Text("Route1", style: new TextStyle(
color: const Color(0xFF06244e), fontSize: 14.0))),
new BottomNavigationBarItem(
icon: index==1?new Image.asset('images/1.0x/icon2.png'):new Image.asset('images/1.0x/newIcon.png'),
title: new Text("Route2", style: new TextStyle(
color: const Color(0xFF06244e), fontSize: 14.0))),
new BottomNavigationBarItem(
icon: index==2?new Image.asset('images/1.0x/icon3.png'):new Image.asset('images/1.0x/newIcon.png'),
title: new Text("Route3", style: new TextStyle(
color: const Color(0xFF06244e), fontSize: 14.0),)),
new BottomNavigationBarItem(
icon: index==3?new Image.asset('images/1.0x/icon4.png'):new Image.asset('images/1.0x/newIcon.png'),
title: new Text("Route4", style: new TextStyle(
color: const Color(0xFF06244e), fontSize: 14.0),))
])
¡Espero que ayude!
Hay una nueva función agregada en flutter en BottomNavigationBarItem que es active icon. podemos usarlo para decir cuál debería ser el ícono cuando una pestaña está activa
bottomNavigationBar : new BottomNavigationBar(
currentIndex: index,
onTap: (int index)
setState(()
this.index = index;
);
_navigateToScreens(index);
,
type: BottomNavigationBarType.fixed,
items: [
new BottomNavigationBarItem(
backgroundColor: Colors.white,
icon: new Image.asset('images/1.0x/icon1.png'),
activeIcon:new Image.asset('images/1.0x/newIcon.png'),
title: new Text("Route1", style: new TextStyle(
color: const Color(0xFF06244e), fontSize: 14.0))),
new BottomNavigationBarItem(
icon: new Image.asset('images/1.0x/icon2.png'),
activeIcon:new Image.asset('images/1.0x/newIcon.png'),
title: new Text("Route2", style: new TextStyle(
color: const Color(0xFF06244e), fontSize: 14.0))),
new BottomNavigationBarItem(
icon: new Image.asset('images/1.0x/icon3.png'),
activeIcon: new Image.asset('images/1.0x/newIcon.png'),
title: new Text("Route3", style: new TextStyle(
color: const Color(0xFF06244e), fontSize: 14.0),)),
new BottomNavigationBarItem(
icon: new Image.asset('images/1.0x/icon4.png'),
activeIcon: new Image.asset('images/1.0x/newIcon.png'),
title: new Text("Route4", style: new TextStyle(
color: const Color(0xFF06244e), fontSize: 14.0),))
]),
Espero que alguien encuentre esto útil.
Si alguien está buscando una solución para cambiar el color del elemento de la barra de navegación inferior, cuando “tipo” está configurado en “cambio”, inténtelo:
type: BottomNavigationBarType.shifting,
items: [
BottomNavigationBarItem(
activeIcon: Icon(
Icons.home,
color: Colors.grey[700],
),
icon: Icon(
Icons.home,
color: Colors.grey,
),
title: Text(
'Home',
style: TextStyle(
color: Colors.grey[600]
),
),
),
Comentarios y puntuaciones
Si te sientes a gusto, tienes el poder dejar un tutorial acerca de qué le añadirías a este post.