CODEWITHSUNDEEP
flutterdartthemes
TheChartChannel
TheChartChannel

Reputation: 11

Flutter appBarTheme overwriting bottomNavigationBarTheme

I want to create a Light and Dark Theme to my App. In the Dark theme the Bottom Navigationbar should look different to the Light Theme. This is my theme.dart:

    static final ThemeData darkTheme = ThemeData(

    scaffoldBackgroundColor: Colors.white,

    appBarTheme: AppBarTheme(
  backgroundColor: Colors.pink
    ),


      bottomNavigationBarTheme: BottomNavigationBarThemeData(
          backgroundColor: Colors.blue
      )


  );

What Theme I use doesn't matter in this case, BUT: When I dont use "appBarTheme" the BottomNavBar turns Blue, as soon as I add the AppBarTheme the NavBar turns Pink. Can someone explaine me this behavior?

bottomNavigationBar: BottomNavigationBar(
          onTap: (index){
            setState(() {
              _currentIndex = index;
            });
          },
          currentIndex: _currentIndex,
          unselectedItemColor: Colors.grey,
          selectedItemColor: Colors.white,
          backgroundColor: Theme.of(context).appBarTheme.backgroundColor,
          items: const [
            BottomNavigationBarItem(icon: Icon(Icons.star), label: "examples"),
            BottomNavigationBarItem(icon: Icon(Icons.add), label: "counter"),
          ]),

this is my NavBar and this my Appbar:

  appBar: AppBar(
        title: const Text("Counter App"),
        centerTitle: true,
          backgroundColor: Theme.of(context).appBarTheme.backgroundColor,
      ),

It also not changes the Color of the NavBar when I hardcode the backgroundcolor to red e.g.

Upvotes: 0

Views: 367

Answers (1)

TheChartChannel
TheChartChannel

Reputation: 11

LMAO I found my mistake: I used backgroundColor: Theme.of(context).appBarTheme.backgroundColor, both I have to use backgroundColor: Theme.of(context).bottomNavigationBarTheme.backgroundColor, for the NavBar

Upvotes: 0

Related Questions