Click here to Skip to main content
15,346,335 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
I am using a navigation bar with two buttons for both of them I have set the color as white but for one of them, the button is not changing and appears to be the same color as the navigation bar.
The icons.newspaper widget is causing the issue.

The buttons are working perfectly only problem is with color

My navigation bar widget :
class _bottomNavigationBarState extends State<bottomNavigationBar> {
  final navigationKey = GlobalKey<CurvedNavigationBarState>();
  int indexNavbar = 0;
  final screens = [OverViewScreen(), PageViewBuilder()];
  @override
  Widget build(BuildContext context) {
    return
        //  Container(
        //   color: Color.fromARGB(255, 55, 126, 185),
        //   child:
        SafeArea(
      top: false, //to prevent overlap in ios device with the bottom
      child: ClipRRect(
        child: Scaffold(
          extendBody: true, // to make it appear it below the navigationbar
          bottomNavigationBar: Theme(
            data: Theme.of(context)
                .copyWith(iconTheme: IconThemeData(color: Colors.white)),
            child: CurvedNavigationBar(
              color: Color.fromARGB(255, 55, 126, 185),
              buttonBackgroundColor: Color.fromARGB(255, 55, 126, 185),
              animationCurve: Curves.easeInOut,
              animationDuration: Duration(milliseconds: 300),
              key: navigationKey,
              onTap: (index) => setState(() => this.indexNavbar =
                  index), //on tap will cause us to change the index
              index: indexNavbar,
              height: 60,
              items: [
                Icon(
                  Icons.newspaper,
                  size: 30,
                  color: Colors.white,
                ),
                Icon(
                  Icons.video_library,
                  size: 30,
                  color: Colors.white,
                )
              ],
              backgroundColor: Colors.transparent,
            ),
          ),
          body: screens[indexNavbar],
        ),
      ),
    );
  }
}


What I have tried:

I tried wrapping it with the theme widget but that is not doing the trick. I also gave it color separately
Posted
Updated 22-Feb-22 20:02pm

1 solution

Looks like you have set the color for navigation bar and button to the same color -

color: Color.fromARGB(255, 55, 126, 185),
              buttonBackgroundColor: Color.fromARGB(255, 55, 126, 185),
   
Comments
Kavya Bhargava 23-Feb-22 6:08am
   
That is the button background colour , when you click the button this is the colour which appears behind the button.
Andre Oosthuizen 24-Feb-22 14:43pm
   
Nope - as per your code --- child: CurvedNavigationBar( then follows the color code...

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900