페이지 나누는 법

간략하게는 두가지 방법

Router Tab 이렇게 있음. 그 중에 Tab을 만들어보려고 한다.

home page와 shop 화면을 같이 만들어 줄 것임.

Tab이라고 하는게… 그냥 내용물 다 만들어놓고 버튼 눌렀을 때, 내가 원하는 내용물만 나오게 만드는 것임

TabBar 라는 것이 있어서 그걸 가져다 써도 되는데 커스터마이징이 어려움.

3Step을 거쳐라

state에 UI 현재상태 저장.
state에 따라서 tab이 어떻게 보일지 작성 (ex, if문, list 안에 쓰기)
쉽게 state 조작할 수 있게 버튼 만든다든지 하는 것.

// 1. state 만들기
  var tab = 0;
...

// 2. tab에 따른 보여지는 UI 만들기
  body: [Text('홈페이지'), Text('샵페이지')][tab],
...

// 3. onTab 이벤트에 tab 값 변경하는 함수 추가
bottomNavigationBar: BottomNavigationBar(
        showSelectedLabels: false,
        showUnselectedLabels: false,
        onTap: (i){
          setState(() {
            tab = i;
          });
        },
        items:[
          BottomNavigationBarItem(icon: Icon(Icons.home_outlined), label: '홈'),
          BottomNavigationBarItem(icon: Icon(Icons.shopping_bag_outlined), label: '샵'),
        ]
      ),

만약에 Tab 사이에 슬라이드 했을 때 옮겨졌으면 좋겠다면 PageView()라는 애를 쓰면 된다고 함.

숙제

게시물 레이아웃 3개 만들기

Image.network('https://codingapple1.github.io/app/car0.png'),

Flutter 공부-13 Tab

페이지 나누는 법

간략하게는 두가지 방법

숙제