[Flutter] BottomNavigationBar 아이템 4개 이상 추가하기

Flutter의 BottomNavigationBar은 무조건 2개 이상의 item을 추가해야 하며 3개까지는 별다른 옵션을 추가해주지 않아도 상관이 없다. 하지만 4개 이상의 item을 추가할 시 첫 item만 icon과 label이 제대로 나타나고 그 이후 항목에 대해서는 label이 제대로 나타나지 않아 위치가 이상하게 보이는 문제가 발생을 한다.

위와 같이 홈 item 만 icon과 label이 정상적으로 나타나고 그 뒤로는 label이 보이지 않아 홈만 위로 올라가있게 나온다. 이 문제를 해결하는 방법은 BottomNavigationBar에 type: BottomNavigationBarType.fixed을 추가해주면 된다

...
bottomNavigationBar: BottomNavigationBar(
  type: BottomNavigationBarType.fixed,	// item이 4개 이상일 경우 추가
  ...  // 색상 및 다른 옵션
  items: [
    BottomNavigationBarItem(
      icon: Icon(Icons.home),
      label: '홈',
    ),
    BottomNavigationBarItem(
      icon: Icon(Icons.receipt),
      label: '주문',
    ),
    BottomNavigationBarItem(
      icon: Icon(Icons.shopping_basket),
      label: '장바구니',
    ),
    BottomNavigationBarItem(
      icon: Icon(Icons.person),
      label: '마이페이지',
    ),
  ]
},
...

위와 같이 type: BottomNavigationBarType.fixed 를 추가해주면 아래와 같이 모든 item이 정상적으로 보이게 된다.

이 글이 도움이 되셨다면 아래에 관심💛을 한번씩 눌러주시고 댓글로 관심을 표현해주세요 ~ 읽어 주셔서 감사합니다.