[Flutter] 플러터 BottomNavigationBar, BottomNavigationBarItem 위젯 - font, color, label

플러터(Flutter)는 모바일 애플리케이션에 자주 사용되는 BottomNavigationBar 위젯을 쉽게 사용할 수 있도록 Scaffold 위젯 매개변수로 지정할 수 있도록 만들어 놓았습니다. 플러터(Flutter)에 위젯들을 자유롭게 사용하 시분 개발자분들은 직접 만들기도 하지만 플러터(Flutter)에서 제공해주는 기능들만 사용해도 충분히 효과를 볼 수 있기 때문에 모바일 애플리케이션 플러터 개발자 분들이 필수적으로 사용하고 있으니, 함께 알아보도록 하겠습니다.

 

 

 

 플러터(Flutter) BottomNavigationBar 소개 및 초간단 구현

하단네비게이션바 코드 및 구현화면

구현 화면에서 보시는 것과 같이 BottomNavigationBar 위젯은 모바일 애플리케이션 하단에 나타나게 되면 어떠한 위젯도 BottomNavigationBar 위젯의 영역을 침범해서는 안됩니다. BottomNavigationBar 위젯에 있는 아이콘을 클릭하시면 BottomNavigationBar 위젯 상단의 화면(Index 0: Home) 영역이 클릭한 주제와 맞게 보여주는 게 주된 기능입니다. (참고, 현재 코드에서는 아이콘을 눌러도 어떠한 변화시키는 코드는 없고 기본 BottomNavigationBar 위젯을 출력해주는 코드만 존재합니다.)

 

코드에서 보시는것과 같이 BottomNavigationBar 위젯을 화면에 그리기 위해서 BottomNavigationBar 위젯과 BottomNavigationBarItem 위젯 두 가지 사용하셔야 화면에 표시됩니다. 이 두 가지 위젯의 매개변수의 내용 알고 계셔야 다양한 기능과 커스텀하게 위젯을 표현할 수 있습니다.

 

플러터(Flutter) BottomNavigationBar - 아이콘 클릭 이벤트 시 화면 전환

BottomNavgationBar 위젯 아이템 클릭 이벤트 및 구현화면

1. BottomNavgationBar 위젯 아이템 클릭 시 메인화면에 출력될 주제에 맞는 위젯을 미리 만들어 배열 메모리에 저장

2. BottomNavgationBar - currentIndex : 아이템 클릭 인덱스( home:0, person:1, settings:2 )

3. BottomNavgationBar - onTap : 아이템 클릭 시 이벤트로 클릭한 인덱스를 멤버 변수(_currentottomNavbarIndex)에 저장

4. setState함수를 통해 화면 갱신

 

 

 

 플러터(Flutter) BottomNavigationBar 추가 기능(Font, Color, showLabel)

플러터(Flutter)의 위젯은 대부분 디폴트 매개변수를 지니고 있어 최소한의 매개 변수만으로도 구현을 쉽게 할 수 있다. 하지만 사용자 정의에 따라 필요 요소를 바꾸는 것도 존재합니다. 결과 화면만 봤을 때 아이콘과 라벨이 보이는데 색상, 컬러를 바꾸고 싶지 않을까요? 또는 깔끔함을 위해 라벨을 표지 하지 않은 모바일 애플리케이션도 많이 있습니다. 함께 알아보도록 하겠습니다.

BottomNavigationBar 추가기능 및 결과 화면

BottomNavigationBar 위젯의 추가 코드는 폰트 사이즈 변경, 아이콘 컬러 변경, 배경화면 변경, 라벨 출력 여부 등이 있습니다. 코드와 같이 대부분의 매개변수들은 선택되었을 때(selected), 선택되지 않았을 때(unselected)로 나누어 설정이 가능합니다.

1. BottomNavigationBar - backgroundColor : BottomNavigationBar의 배경 색상을 지정

2. BottomNavigationBar - selectedItemColor : 선택된 아이콘 색상 지정

3. BottomNavigationBar - unselectedItemColor : 선택되지 않은 아이콘 색상 지정

4. BottomNavigationBar - selectedFontSize : 선택된 아이콘 라벨 폰트 사이즈 지정

5. BottomNavigationBar - unselectedFontSize : 선택되지 않은 아이콘 라벨 폰트 사이즈 지정

6. BottomNavigationBar - showSelectedLabels : 선택된 아이콘 라벨 출력 여부

7. BottomNavigationBar - showUnselectedLabels : 선택되지 않은 아이콘 라벨 출력 여부

 

 

 

 플러터(Flutter) BottomNavigationBar Item 4개 이상 추가 시 문제점

플러터(Flutter)에서 제공하는 BottomNavigationBar 위젯은 items 개수가 3개까지는 잘 나오는데 4개가 되면 화면에 나오지 않는 버그성 문제가 발생합니다. 해당 부분은 버그인지 의도한것인지는 판단 할 수 없지만 해결방법은 있습니다.

• 문제가 발생하는 부분

BottomNavgationBar-버그코드 및 결과화면

• type 추가로 문제를 해결하는 부분

BottomNavgationBar-버그해결 코드 및 결과 화면

BottomNavigationBarItem 위젯의 아이템 갯수가 3개를 초과하는 경우 하단 내비게이션 바가 나오지 않는 문제(버그)는 간단히 type 매개변수를 세팅해주면 해결이 된다. type 매개변수에 대입 가능한 값은 BottoNavigationBarType.fixed 와 BottoNavigationBarType.shifting 두 가지 값이 존재하는데 api 내용으로는 fixed의 경우 말 그대로 고정한다는 의미를 지니며 shifting의 경우 클릭 이벤트 발생 시 애니메이션 효과 등을 넣을 수 있다고 한다. 하지만 실제로 shifting으로 변경했을 때 또 하단바가 나오지 않는 문제가 발생합니다. 정확히 이 상황이 버그인 건지 사용 미숙인 것인지는 확인할 수 없었으나 일단 3개 초과의 아이템을 사용할 때는 type 매개변수에 fixed 값을 넣어 해결하도록 하시면 됩니다.

 

 플러터(Flutter) BottomNavigationBar 마무리

BottomNavigationBar의 경우는 모바일 애플리케이션 대부분에서 사용되는 것이라는 걸 알고 계실 겁니다. 실제 매개변수들은 더 많이 존재하나 위에서 알려드린 것만 사용하여도 대부분의 프로젝트에 적용이 될 것이라 생각합니다. 전체 코드는 아래 포스팅을 복사해서 실행하시면 바로 샘플 결과를 확인하실 수 있습니다.

 

👇👇👇

[Flutter] 플러터 BottomNavigationBar, BottomNavigationBarItime 전체 소드코드