① TabBarView 위젯 생성하기
코드 추가 후, 실행하니 오류 남... (앱 실행이 안 됨)
오류 원인은 Controller가 없기 때문!
② Controller 선언해서 집어 넣기
Controller는 일반적으로 내가 생성해서 Controller 파라미터에 집어 넣어주면 됨!
TabController 세팅하기
-
late
나중에 TabController controller 이 값이 입력될 건데, 우리가 이 값을 부를 때 이 controller라는 값이 선언이 이미 되어 있을 거야 가정해주는 것.TabController? controller; 이렇게 ?를 달아버리면, TabController controller를 쓸 때마다 null 처리를 해줘야 하는 번거로움이 발생함.
수정해 주고 재실행 하면... 이렇게 잘 나오는 걸 확인할 수 있음.
③ 아래 탭과 뷰(화면) 연동하기
onTap, currentIndex 값을 잘 설정해주면 됨!
먼저 onTap에 있는 setState를 지우고, 코드 수정해주자.
// value에 움직이고 싶은 index를 넣어주면 됨
onTap: (int index) {
controller.animateTo(value);
},
그러면 홈 탭 누르면 홈 화면으로 가고, 음식 탭 누르면 음식 화면으로 전환되는 걸 볼 수 있다.
그런데 또 문제!!! currentIndex는 바뀌지 않고 있음.
controller의 listener를 사용해서 해결하면 됨!
④ 화면 상하 스크롤 되도록
좌우 스크롤 시, 탭바 변경되고 있는 상태인데 좌우로 넘어가는 불편한 일이 없게 막고,
식당 리스트, 메뉴 등도 볼 수 있도록 상하 스크롤도 되게 해 볼거임!
physics을 사용해서 간단하게 끝...!
