title: How nagivate between pages with BottomNavyBar
body: <p>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 &quot;BarItem&quot; but appers a mesage &quot;only static members can be accessed in initializers&quot;
  I'm trying to replace the part:</p>
  <pre><code>body: AnimatedContainer(
          color: widget.barItems[selectedBarIndex].color, duration: const Duration(milliseconds: 300),),
  </code></pre>
  <p>For a method to change my pages as I click on menu.
  Help me guys!</p>
  <pre><code>import 'package:flutter/material.dart';
  
  class AnimatedBottomBar extends StatefulWidget {
  
    final List&lt;BarItem&gt; barItems;
    final Duration animationDuration;
    final Function onBarTap;
  
    AnimatedBottomBar({this.barItems, this.animationDuration = const Duration(milliseconds: 500), this.onBarTap});
  
    @override
    _AnimatedBottomBarState createState() =&gt; _AnimatedBottomBarState();
  }
  
  class _AnimatedBottomBarState extends State&lt;AnimatedBottomBar&gt; 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&lt;Widget&gt; _buildBarItems() {
      List&lt;Widget&gt; _barItems = List();
      for (int i = 0; i &lt; 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: &lt;Widget&gt;[
                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 : &quot;&quot;,
                    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});
  }
  </code></pre>
  <pre><code>import 'animated_bottom_bar.dart';
  
  class BottomBarNavigationPattern extends StatefulWidget {
  
    final List&lt;BarItem&gt; barItems = [
      BarItem(
          text: &quot;Home&quot;,
          iconData: Icons.home,
          color: Colors.indigo,),
      BarItem(
          text: &quot;Likes&quot;,
          iconData: Icons.favorite_border,
          color: Colors.pinkAccent),
      BarItem(
          text: &quot;Search&quot;,
          iconData: Icons.search,
          color: Colors.yellow.shade900),
      BarItem(
          text: &quot;Profile&quot;,
          iconData: Icons.person_outline,
          color: Colors.teal),
    ];
  
    @override
    _BottomBarNavigationPatternState createState() =&gt; _BottomBarNavigationPatternState();
  }
  
  class _BottomBarNavigationPatternState extends State&lt;BottomBarNavigationPattern&gt; {
  
    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;
            });
          }
        ),
        );
    }
  }
  </code></pre>