What is the color of the Flutter bottom bar?

The color of the Flutter bottom bar, specifically the `BottomNavigationBar`, is not fixed and can be customized to match your application's design. By default, Flutter uses a light grey color for the background of the `BottomNavigationBar` and a primary color for the selected item's icon and label.

However, you have full control over the appearance of the bottom bar. Here's how you can customize its color:

1. `backgroundColor` Property:

- You can set the background color of the entire `BottomNavigationBar` using the `backgroundColor` property. This property accepts a `Color` object. For example:

BottomNavigationBar(
  backgroundColor: Colors.blue,
  items: const [
    BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Home'),
    BottomNavigationBarItem(icon: Icon(Icons.search), label: 'Search'),
  ],
)

- In this example, the background color of the bottom bar will be set to blue.

2. `selectedItemColor` and `unselectedItemColor` Properties:

- You can customize the color of the selected and unselected items (icons and labels) using the `selectedItemColor` and `unselectedItemColor` properties, respectively. For example:

BottomNavigationBar(
  backgroundColor: Colors.grey[200],
  selectedItemColor: Colors.green,
  unselectedItemColor: Colors.grey,
  items: const [
    BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Home'),
    BottomNavigationBarItem(icon: Icon(Icons.search), label: 'Search'),
  ],
)

- Here, the selected item will be green, and the unselected items will be grey.

3. Theme Customization:

- You can also customize the bottom bar's colors through your application's theme. This allows for a consistent look and feel across your app. You can set the `bottomNavigationBarTheme` in your `ThemeData`:

ThemeData(
  bottomNavigationBarTheme: BottomNavigationBarThemeData(
    backgroundColor: Colors.purple,
    selectedItemColor: Colors.white,
    unselectedItemColor: Colors.grey[400],
  ),
)

- This will apply the specified colors to all `BottomNavigationBar` widgets in your app.

In summary, the Flutter bottom bar's color is highly customizable. You can set the background color, selected item color, and unselected item color directly on the `BottomNavigationBar` widget or through your application's theme. This flexibility allows you to create a bottom bar that perfectly matches your app's design.

Learn more about this