I am trying out Flutter and I am trying to change the colour of the BottomNavigationBar
on the app but all I could achieve was change the colour of the BottomNavigationItem
(icon and text).
Here is where i declare my BottomNavigationBar
:
class _BottomNavigationState extends State<BottomNavigationHolder>{ @override Widget build(BuildContext context) { return new Scaffold( appBar: null, body: pages(), bottomNavigationBar:new BottomNavigationBar( items: <BottomNavigationBarItem>[ new BottomNavigationBarItem( icon: const Icon(Icons.home), title: new Text("Home") ), new BottomNavigationBarItem( icon: const Icon(Icons.work), title: new Text("Self Help") ), new BottomNavigationBarItem( icon: const Icon(Icons.face), title: new Text("Profile") ) ], currentIndex: index, onTap: (int i){setState((){index = i;});}, fixedColor: Colors.white, ), ); }
Earlier I thought I had it figured out by editing canvasColor
to green on my main app theme but it messed up the entire app colour scheme:
class MyApp extends StatelessWidget { // This widget is the root of your application. @override Widget build(BuildContext context) { return new MaterialApp( title: 'Flutter Demo', theme: new ThemeData( primarySwatch: Colors.blue, canvasColor: Colors.green ), home: new FirstScreen(), ); } }
To style the bottom navigation bar is just to style each of the subview components. BottomNavigationView can be customized in terms of colour and typography. As the BottomNavigationView is a material component, you need to inherit from a Material Components theme or a Material Components Bridge theme.
A bottom navigation bar is a material widget that is present at the bottom of an app for selecting or navigating to different pages of the app. It is usually used in conjunction with a Scaffold, where it is provided as the Scaffold. bottomNavigationBar argument.
You have to change unselectedItemColor property in your BottomNavigationBar . bottomNavigationBar: BottomNavigationBar( unselectedLabelStyle: const TextStyle(color: Colors. white, fontSize: 14), backgroundColor: const Color(0xFF084A76), fixedColor: Colors.
I was able to add the indicator by providing activeIcon with BoxDecoration, how ever there is no sliding effect for it. The library above provides sliding effect but can only either icon or text. I clone and change the _buildItemWidget function to make it always show both. It works like charm.
There is no option to specify the background color of BottomNavigationBar
but to change the canvasColor
. One way you can achieve it without messing up the whole app would be by wrapping BottomNavigationBar
in a Theme
with desired canvasColor
.
Example:
bottomNavigationBar: new Theme( data: Theme.of(context).copyWith( // sets the background color of the `BottomNavigationBar` canvasColor: Colors.green, // sets the active color of the `BottomNavigationBar` if `Brightness` is light primaryColor: Colors.red, textTheme: Theme .of(context) .textTheme .copyWith(caption: new TextStyle(color: Colors.yellow))), // sets the inactive color of the `BottomNavigationBar` child: new BottomNavigationBar( type: BottomNavigationBarType.fixed, currentIndex: 0, items: [ new BottomNavigationBarItem( icon: new Icon(Icons.add), title: new Text("Add"), ), new BottomNavigationBarItem( icon: new Icon(Icons.delete), title: new Text("Delete"), ) ], ), ),
Hope that helps!
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With