Want to style BottomNavigationBar in your Flutter app? 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.
Here’s an example:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | 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"), ) ], ), ), |
If you like this question & answer and want to contribute, then write your question & answer and email to freewebmentor[@]gmail.com. Your question and answer will appear on FreeWebMentor.com and help other developers.
