[Flutter] 탭으로 페이지 분리하기

Navigator, Router 말고 Tab으로 페이지를 분리해보자
TabBar 위젯을 갖다써도 되지만 동적 UI는 처음이니 직접 만들어보기

동적 UI 만들기

1. state에 UI(오늘은 tab)의 현재 상태 저장
2. state에 따라 UI를 어떻게 보일지 작성
3. 유저가 state를 쉽게 조작하도록 만들기

1. state에 tab의 현재 상태 저장

• 기존 위젯이 stless 였다면 stful로 변환하기
• state 생성 ex) var tab = 0;

2. state에 따라 어떤 tab을 노출시킬지 작성

• if문을 써도 되지만 body를 List로 짜면 편함
• body: [Text('홈'), Text('샵')][tab]

3. 유저가 state를 쉽게 조작하도록 만들기

• bottomNavigationBar의 구조가 아래와 같다면

기존 bottomNavigationBar

bottomNavigationBar: BottomNavigationBar(
  items: [
    BottomNavigationBarItem(
      icon: Icon(Icons.home_outlined),
      label: '홈',
    ),
    BottomNavigationBarItem(
      icon: Icon(Icons.shopping_bag_outlined),
      label: '샵',
    ),
  ],
),

• onTab을 추가하여 tab 값을 변경하자
• onTab에는 파라미터 하나를 넣게 되어 있는데 탭 값과 같음

onTab이 있는 bottomNavigationBar

bottomNavigationBar: BottomNavigationBar(
  onTap: (i) {
	setState(() {
	  tab = i;
	});
  },
  items: [
    BottomNavigationBarItem(
      icon: Icon(Icons.home_outlined),
      label: '홈',
    ),
    BottomNavigationBarItem(
      icon: Icon(Icons.shopping_bag_outlined),
      label: '샵',
    ),
  ],
),

결과

TabBar 위젯 말고 PageView 같은 위젯도 사용해보자.
흔히 말하는 Carousel 개발 시 자주 쓰인다.