Flutter Bottom Navigation bar Icon Color Not Changing. Is it Some kind of setState bug or somthing trouble with my code?

user_14124385 0
Viewed 1628

I am New to Flutter actually I am not a coder but I am trying to build an app that can do basic things like the sign-in page, sign up, user data showing to the screen, and also I can see each other profile from the app I Stuck in the Bottom Navigation bar here which I never thought that it would be hard to get through.
instead of giving up, I decided to google around and come up with different results (some of them are hard to understand and confusing). I am trying to build a navigation bar that routs to different pages with minimum memory usage (efficient code)
I am so confused and I don't know now what to do! please help another coder(if someone fixes this I am going to consider myself a coder, don't think too much)

  @override
  Widget build(BuildContext context) {
    PageController _pageController = PageController();
    final List<Widget> _tabs = [FeedPage(), ListingPage(), SettingPage()];

    int _selectedIndex = 0;
    void _onPageChanged(int index) {
      setState(() {                                //Is something wrong with my setState?
        _selectedIndex = index;
      });
    }

    void _onItemTapped(int _selectedIndex) {
      _pageController.jumpToPage(_selectedIndex);
    }

    return Scaffold(
      body: PageView(
        controller: _pageController,
        children: _tabs,
        onPageChanged: _onPageChanged,                         //Check it out
        physics: NeverScrollableScrollPhysics(),
      ),
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _selectedIndex,                          //I use this
        onTap: _onItemTapped,
        items: [
          BottomNavigationBarItem(
            icon: Icon(
              Icons.home,
            ),
            title: Text("Home"),
          ),
          BottomNavigationBarItem(
            icon: Icon(
              Icons.list,
            ),
            title: Text("List"),
          ),
          BottomNavigationBarItem(
            icon: Icon(
              Icons.person,
            ),
            title: Text("Profile"),
          ),
        ],
      ),
    );
  }
}
//is this the code bugged? or something wrong in my flutter IED or something I am confused
setstate flutter-layout flutter
3 Answers

try this code below, insert this code just before the scaffold perntesis, also dont forget to insert the packacge.

 bottomNavigationBar: CurvedNavigationBar(
        color: Colors.black26,
        backgroundColor: Color(0xFFFFC5C5),
        buttonBackgroundColor: Colors.greenAccent,
        height: 50.0,
        animationCurve: Curves.bounceInOut,
        items: <Widget>[
          Icon(Icons.translate, size: 20, color: Colors.black),

          Icon(Icons.translate, size: 20, color: Colors.black),
          Icon(Icons.list, size: 20, color: Colors.black),
          Icon(Icons.account_balance, size: 20,
              color: Colors.black),
//            Icon(Icons.camera, size: 20, color: Colors.black),
        ],
        index: 2,
        animationDuration: Duration(milliseconds: 400),
        onTap: (index) {
          debugPrint("Curent index is $index");
        }
    )
user_146740780

Okay I see you havent mentioned color in your icons so as page changes let us apply the same logic to avoid confusion.

So let us have a list of colors declared below final list of _tabs

List<Color> selectedColor = [Colors.grey[900],Colors.grey[900],Colors.grey[900]];

Now we have assign these to our icons as

items: [
      BottomNavigationBarItem(
        icon: Icon(
          Icons.home,
       color: selectedColor[0],                      //Add here
        ),
        title: Text("Home"),
      ),
      BottomNavigationBarItem(
        icon: Icon(
          Icons.list,
       color: selectedColor[1],                      //Add here
        ),
        title: Text("List"),
      ),
      BottomNavigationBarItem(
        icon: Icon(
          Icons.person,
       color: selectedColor[2],                      //Add here
        ),
        title: Text("Profile"),
      ),
    ],

Now due to this mentioned in the list all have a grey colour

void updateColor(int num){
    //here I am again declaring it because when I select the other color the list should //always remain same for the effect you want
    selectedColor = [Colors.grey[900],Colors.grey[900],Colors.grey[900]];
     setState(() {
       switch(num){
         case 1 : selectedColor[0] = Colors.Red;
                  break;
         case 2 : selectedColor[1] = Colors.Red;
                  break;
         case 3 : selectedColor[2] = Colors.Red;
                  break;
         
       }
     });

  }

Now what we will do is call this on your onChanged function or you can also mention it in onTap but I dont understand why you used both at the same time

I will use

void _onItemTapped(int _selectedIndex) {
      setState(() {                                //Is something wrong with my setState?
        _selectedIndex = index;
        updateColor(_selectedIndex);
      });
      _pageController.jumpToPage(_selectedIndex);

    }
user_132208170

You can simply change the colors in the bottom navigation bar as follows.

  1. Change the main color of

    color: Colors.orange,

  2. Change the Background color

    backgroundColor: Colors.white,

  3. Change the Icon background-color

    buttonBackgroundColor: Colors.orangeAccent,

  4. Change the Icon Size

    Icon(Icons.person, size: 30),

The sample code as follows

bottomNavigationBar: CurvedNavigationBar(
      color: Colors.orange,
      backgroundColor: Colors.white,
      buttonBackgroundColor: Colors.orangeAccent,
      items: <Widget>[
        Icon(Icons.person, size: 30),
        Icon(Icons.close, size: 30),
        Icon(Icons.settings, size: 30),
      ],
      onTap: (index) {
       
        //Handle button tap
        
      },
    ),

Hope this will fix your problem.

user_107012480
Related