플러터, flutter) TapBar가 들어간 화면 만들기 (윗쪽)

이런 것이 탭 bar이다.

누르는 것에 따라 보여지는 화면이 달라진다.

 

어떻게 만드는 것일까?

꽤 복잡할 수 있으나 이해하면 쉽다.

 

1)  screen 위젯을 stateful 위젯으로 설정하기 > 상관없다. 

 

2) 화면 위젯에 사용될 scaffold 위젯을, DefaultTabController 위젯으로 감싸기

 

이렇게 하면 된다. TabsScreen이라는 위젯을 우리는 화면으로 사용할 것이며, 

Scaffold를 DefaultTabController 위젯으로 감싼 것을 볼 수 있다.

 

3) DefaultTabController 속성으로 length 정하기 : length는 탭의 개수를 의미한다. 

 - 여기서는 2개로 설정했다. 이 값에 따라서 화면의 개수도 정확히 일치해야 한다.

 

4) Scaffold 내, appbar 속성에서, AppBar위젯의 bottom 속성으로, TapBar 위젯을 넣는다.

 - 참고로 그냥 넣기만 하면 DefaultTabController가 TapBar를 인식한다.

 - Tapbar에서는 Tab위젯을 넣을 수 있다. 정확히 아이콘은 무엇으로 할지, text는 무엇으로 할지 결정할 수 있다.

 - 중요한 것은 위에 length와 Tab의 수가 일치해야 한다는 점이다. 2개라고 했으니 여기도 2개의 Tab 객체를 했다.

 

5) body에는 일반 객체를 넣는 것이 아니라, TabBarView라는 객체를 넣는다.

그리고 TabBarView의 children 객체는 화면 순서 대로, 화면 개수만큼 위젯을 넣어준다.

첫번재 탭을 카테고리로 했으니 순서상 첫번째 위젯도 카테고리로 해두었다.

두번째 탭은 favorites로 했으니 당연히 그 screen 위젯이 왔다.

여기서 알아두어야할 것은, 위 2개의 위젯 전부다 scaffold를 return하지 않고, 그냥 위젯을 리턴한다.

또한, 개수가 2개 인 것도 length를 그렇게 설정했기 때문이다.

 

 

이제 전부다 끝났다.

Tabbar가 들어간 화면을 
띄우고 싶다면,

TabsScreen이라는 위젯을 build하면 되는 것이다!

 

+ 참고로 

각 위젯에 다양하 속성들 찾아보면 설정할 수 있는 것들이 매우 많으므로 잘 보기를 바람