플러터, flutter) TabBar가 들어간 화면 만들기 (아래쪽)

TabBar를 위에 다는 것을 알아보았으니,

이제 아래쪽에 다는 것을 알아보자, 

 

방식이 약간 다르니 알아두면 좋을 것 같다.

 

아래쪽에 tabbar를 단다는 것은 이런 느낌이다.

 

이제 순서대로 살펴보자

 

1) 위에 다는 것과는 달리, 화면이 되는 위젯의 뿌리 위젯은 Scaffold이다. 대신

Scaffold의 bottomNavigationBar 속성에 > BottomNavigationBar위젯을 넣는다.

 

2) BottomNavigationBar 속성으로 items를 설정해야 한다

 - items는 tap 들과 똑같다. 

 - BottomNavigationBarItem위젯의 리스트를 값으로 받는다.

 - BottomNavigationBarItem위젯은 icon과 타이틀 등을 속성으로 정할 수 있다.

 

 

3) onTap을 설정해주어야 한다.

 - 특이 한점이 이것이다. 위쪽에 달았을 때는 controller가 다 알아서 해주었지만 여기서는 직접 구현해야 한다

 - 그리고 onTap 마다 화면이 전환 되어야 하므로, stateful 위젯을 사용해서 setState을 누를 때마다 돌려주어야 한다.

 

4) onTap을 설정하기 위한 메소드는 다음 처럼 int 값을 인수로 받으며, 이 인수값은, 눌린 탭의 순서를 의미한다

(BottomNavigationBarItem위젯의 리스트의 인덱스)

 

 

<이해하기>

 

탭을 누른다 > index가 주어지는 함수 callback 일어난다 > 인덱스에 따라 생성되기를 원하는 위젯( 탭 안의 화면)들을 

Widget리스트로 미리 설정해두어야 한다. (당연히 BottomNavigationBarItem리스트 개수와 같아야겠지!?)

 

그리고 Scaffold의 body를

이처럼 설정을 해두면 클릭할 때 마다 탭이 잘 작동된다.

다만 약간의 자연스러운 애니메이션은 tabbar를 위에 달았을 때는 화면간 전환시 애니메이션이 자동으로 적용되어 더욱 자연스럽다. 

 

 

5) currentIndex 값 설정하기 

BottomNavigationBar의 속성중에 currentIndex라는 속성이 있는데,

우리가 사용하는 index를 여기에 할당하지 않으면, Tab을 눌렀을 때, 화면은 바뀌지만 Tap쪽은 그대로이게 된다.

따라서 여기 할당하는 것이 매우 중요! 

 

<참고>

tap이 selected가 되면 색깔과 fontsize가  살짝 바뀌는데 그것도 BottomNavigationBar의 속성으로 설정 가능하다.

 

<참고2>

TabBar에 애니메이션효과를 넣을 수 있다. 

BottomNavigationBar의 type 속성으로 BottomNavigationBarType.shifting 이 있다.

종류가 2개 밖에 없는데 하나가 fixed로 디폴트 값이다. 

이 것을 사용할 경우 특이한 점이 있는데 backgroundColor의 효과가 사라진다.

직업 BottomNavigationBarItem 위젯에 각각 color를설정해주어야 한다. 

 

<참고 3> 

위 처럼, List를 위젯 + data로 구성하여, 위젯이 뜰 때, AppBar나 floating button 등 dynamic하게 화면을 구성할 수 있다.