Flutter 플러터 BottomNavigationBar는 세 개 이상의 항목으로 작동하지 않습니다., Flutter BottomNavigationBar not working with more than three items

질문

Flutter (0.6)에서 BottomNavigationBar에 문제가 있습니다. 자식으로 3개 이상의 BottomNavigationBarItems를 추가하면, 바의 버튼이 흰색 아이콘으로 꼬여 나옵니다. 3개 이하의 항목만 사용하면 모든 것이 정상입니다.

여기에는 바를 깨뜨리는 위젯 코드가 있습니다:

bottomNavigationBar: BottomNavigationBar(
          currentIndex: 0,
          iconSize: 20.0,
          items: [
          BottomNavigationBarItem(
              title: Text('Home'), icon: Icon(Icons.accessibility)),
          BottomNavigationBarItem(
              title: Text('Preise'), icon: Icon(Icons.account_box)),
          BottomNavigationBarItem(
              title: Text('Test'), icon: Icon(Icons.adb)),
          BottomNavigationBarItem(
              title: Text('Mehr'), icon: Icon(Icons.menu))
        ])

여기서 무엇이 잘못되었나요?

답변

4개 이상의 항목의 경우, type을 고정으로 설정하세요.

bottomNavigationBar: BottomNavigationBar(
  type: BottomNavigationBarType.fixed, // 이것만 있으면 됩니다!
  items: // ...,
)

---

출처: https://github.com/flutter/flutter/issues/13642#issuecomment-371875044

BottomNavigationBar 항목이 3개 이상인 경우, BottomNavigationBarType.shifting으로 변경됩니다. https://docs.flutter.io/flutter/material/BottomNavigationBar/BottomNavigationBar.html에 명시되어 있습니다. 이 정보는 클래스의 설명서에서 강조되어야 합니다. (제가 놓쳤습니다.)

BottomNavigationBar의 타입이 BottomNavigationBarType.shifting인 경우, 항목의 텍스트와 아이콘은 DefaultTextStyle과 IconTheme을 통해 흰색으로 렌더링됩니다. BottomNavigationBarItem.backgroundColor이 대비되는 색상으로 지정되었다고 가정합니다. 이는 분명히 혼란스럽습니다.

shifting 타입 바텀 내비게이션 바의 전반적인 아이디어는 각 항목이 다른 배경색을 가질 것이라는 것입니다. 이 배경색은 해당 항목이 선택될 때 전체 내비게이션 바의 색상이 될 것이므로 흰색과 대비되는 색상이어야 합니다.

BottomNavigationBar와 NavigationBarItem의 설명서가 개선되어야 합니다.