Repository: flutter
Issue: Unexpected BottomNavigationBar styles with type shifting
Labels: framework,f: material design,c: proposal,team-design,triaged-design

Background
---
There are two modes for the bottom navigation bar `fixed` and `shifting`.
With default styling, the background for `fixed` is light, and the text dark.
But when switching to `shifting` the text will suddenly be white, while the background stays also light.

One might say that's okay, different modes behave differently.
However, switching modes can be as subtle as adding one additional item to the bottom navigation bar and suddenly it's all white and unreadable!

Looking at the implementation it gets clear why this happens. But from an API or user perspective, this has no advantages nor benefits during implementation...

@HansMuller explained and described it [in this comment](https://github.com/flutter/flutter/issues/13642#issuecomment-371875044) as expected behavior and I understand this.
So this issue is less about an "incorrect"/"faulty" implementation, but rather to encourage switching to a different, more intuitive behavior overall!

Based on the information I found in the Flutter docs and the related issues (mostly comments from @HansMuller) I assumed that this is normal behavior of the bottom navigation bar, so I checked the official docs for it:
https://material.io/components/bottom-navigation#usage

---

When looking at the docs one notices two things:

1. Different background (surface) color:
There are examples with a white background
![image](https://user-images.githubusercontent.com/10195482/103426065-f581fd00-4bb6-11eb-9800-3ef52751482d.png)
And a colored background
![image](https://user-images.githubusercontent.com/10195482/103426081-19ddd980-4bb7-11eb-88b2-bac994b29fa1.png)

2. There are different behaviors of how the icon and label get displayed:
Icons and labels always visible for all items (would resemble Flutters' `BottomNavigationBarType.fixed`)
![image](https://user-images.githubusercontent.com/10195482/103426098-3d088900-4bb7-11eb-8e4c-4aff4593efa5.png)
Icons always visible, Label only for currently selected item (would resemble Flutters' `BottomNavigationBarType.shifting`)
![image](https://user-images.githubusercontent.com/10195482/103426065-f581fd00-4bb6-11eb-9800-3ef52751482d.png)

However, there is no requirement for a shifting bottom navigation bar to have a specific background color!

So, in my humble opinion Flutter should not force that default behavior for a shifting navigation bar.
Especially, if a change like the following would result in a WTF moment with users:

```dart
BottomNavigationBar(
  items: const <BottomNavigationBarItem>[
    BottomNavigationBarItem(
      icon: Icon(Icons.home),
      label: 'Home',
    ),
    BottomNavigationBarItem(
      icon: Icon(Icons.business),
      label: 'Business',
    ),
    BottomNavigationBarItem(
      icon: Icon(Icons.school),
      label: 'School',
    ),
+    BottomNavigationBarItem(
+      icon: Icon(Icons.business_center),
+      label: 'Government',
+    ),
  ],
  currentIndex: _selectedIndex,
  selectedItemColor: Colors.amber[800],
  onTap: _onItemTapped,
);
```

Suddenly, the color would be white instead of dark. And users would have to research why a change like this did happen.

Proposal
---
I would use the same [`colorTween`](https://github.com/flutter/flutter/blob/master/packages/flutter/lib/src/material/bottom_navigation_bar.dart#L856-L879) for both modes.

So changing from this:

```dart
final ColorTween colorTween;
switch (_effectiveType) {
  case BottomNavigationBarType.fixed:
    colorTween = ColorTween(
      begin: widget.unselectedItemColor
        ?? bottomTheme.unselectedItemColor
        ?? themeData.unselectedWidgetColor,
      end: widget.selectedItemColor
        ?? bottomTheme.selectedItemColor
        ?? widget.fixedColor
        ?? themeColor,
    );
    break;
  case BottomNavigationBarType.shifting:
    colorTween = ColorTween(
      begin: widget.unselectedItemColor
        ?? bottomTheme.unselectedItemColor
        ?? themeData.colorScheme.surface,
      end: widget.selectedItemColor
        ?? bottomTheme.selectedItemColor
        ?? themeData.colorScheme.surface,
    );
    break;
}
```

to this:

```dart
final ColorTween colorTween = ColorTween(
  begin: widget.unselectedItemColor
    ?? bottomTheme.unselectedItemColor
    ?? themeData.unselectedWidgetColor,
  end: widget.selectedItemColor
    ?? bottomTheme.selectedItemColor
    ?? widget.fixedColor
    ?? themeColor,
);
```

in the `_createTiles()` method of the `_BottomNavigationBarState`.

Side note
---

Shouldn't `fixedColor` be deprecated, it only exists because of backward compatibility, but it is kept around for a couple of years now.

Related issues
---

#13642
#71974

/cc @HansMuller @xster @Hixie