How nagivate between pages with BottomNavyBar

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]