How nagivate between pages with BottomNavyBar - flutter

Question

I'm trying to navigate between my pages but I can't work it out. I'm not figuring it out. I tried to create a controller and put into "BarItem" but appers a mesage "only static members can be accessed in initializers"
I'm trying to replace the part:
body: AnimatedContainer(
color: widget.barItems[selectedBarIndex].color, duration: const Duration(milliseconds: 300),),
For a method to change my pages as I click on menu.
Help me guys!
import 'package:flutter/material.dart';
class AnimatedBottomBar extends StatefulWidget {
final List<BarItem> barItems;
final Duration animationDuration;
final Function onBarTap;
AnimatedBottomBar({this.barItems, this.animationDuration = const Duration(milliseconds: 500), this.onBarTap});
#override
_AnimatedBottomBarState createState() => _AnimatedBottomBarState();
}
class _AnimatedBottomBarState extends State<AnimatedBottomBar> with TickerProviderStateMixin{
int selectedBarIndex = 0;
#override
Widget build(BuildContext context) {
return Material(
elevation: 10.0,
child: Padding(
padding: const EdgeInsets.fromLTRB(16.0, 16.0, 16.0, 16.0),
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: _buildBarItems(),
),
),
);
}
List<Widget> _buildBarItems() {
List<Widget> _barItems = List();
for (int i = 0; i < widget.barItems.length; i++){
BarItem item = widget.barItems[i];
bool isSelected = selectedBarIndex == i;
_barItems.add(InkWell(
splashColor: Colors.transparent,
onTap: (){
setState(() {
selectedBarIndex = i;
widget.onBarTap(selectedBarIndex);
});
},
child: AnimatedContainer(
padding: const EdgeInsets.symmetric(horizontal: 16.0, vertical: 8.0),
duration: widget.animationDuration,
decoration: BoxDecoration(
color: isSelected ? item.color.withOpacity(0.2) : Colors.transparent,
borderRadius: BorderRadius.all(Radius.circular(30))
),
child: Row(
children: <Widget>[
Icon(item.iconData,
color: isSelected ? item.color : Colors.black,),
SizedBox(width: 10.0,),
AnimatedSize(
duration: widget.animationDuration,
curve: Curves.easeInOut,
vsync: this,
child: Text(
isSelected ? item.text : "",
style: TextStyle(color: item.color, fontWeight: FontWeight.w600, fontSize: 18.0),),
)
],
),
),
));
}
return _barItems;
}
}
class BarItem {
String text;
IconData iconData;
Color color;
PageController controller;//deletar
int page;//deletar
BarItem({this.text, this.iconData, this.color, this.controller, this.page});
}
import 'animated_bottom_bar.dart';
class BottomBarNavigationPattern extends StatefulWidget {
final List<BarItem> barItems = [
BarItem(
text: "Home",
iconData: Icons.home,
color: Colors.indigo,),
BarItem(
text: "Likes",
iconData: Icons.favorite_border,
color: Colors.pinkAccent),
BarItem(
text: "Search",
iconData: Icons.search,
color: Colors.yellow.shade900),
BarItem(
text: "Profile",
iconData: Icons.person_outline,
color: Colors.teal),
];
#override
_BottomBarNavigationPatternState createState() => _BottomBarNavigationPatternState();
}
class _BottomBarNavigationPatternState extends State<BottomBarNavigationPattern> {
int selectedBarIndex = 0;
#override
Widget build(BuildContext context) {
return Scaffold(
body: AnimatedContainer(
color: widget.barItems[selectedBarIndex].color, duration: const Duration(milliseconds: 300),),
bottomNavigationBar: AnimatedBottomBar(
barItems: widget.barItems,
animationDuration: const Duration(milliseconds: 200),
onBarTap: (index){
setState(() {
selectedBarIndex = index;
});
}
),
);
}
}

Answer 1

You just need to add List of Widget you want to navigate to example :
final List<Widget> _buildScreens = [
TiersPage(),
SearchPage(),
SavedPage(),
];
And then change the body of scaffold to _buildScreens[selectedBarIndex]