탭으로 페이지 나누기 (동적 UI)

웹 같은 경우 ~~~.html, **.html 이런식으로 html 파일을 여러개 만들어놓고 보여주는 형식이지만 앱의 경우 페이지가 1개이다. 그래서 앱은 한 페이지 내에서 위젯 단위로 컨텐츠를 보여준다고 생각하면된다.

동적인 UI 만드는 법
1. 현재 UI의 현재 상태를 저장할 state 만들기
2. 그 state에 따라서 현재 UI가 어떻게 보일지 코드를 짜기
3. 유저가 state를 쉽게 조작할 수 있는 기능도 개발해놓기

---

📱 탭으로 동적 UI 만들기

1. 현재 UI의 현재 상태를 저장할 state 만들기

var tab = 0;

2. 그 state에 따라서 현재 UI가 어떻게 보일지 코드를 짜기

body: [ Text('홈페이지'), Text('샵페이지') ][tab],

• 이렇게 할 경우 tab이 0이면 홈페이지가 보이고, tab이 1이면 샵페이지가 보인다.
• 실제로 앱을 만들 때는 저 자리에다가 Text 대신 커스텀위젯 하나씩 박아주면 된다.

3. 유저가 state를 쉽게 조작할 수 있는 기능도 개발해놓기

 bottomNavigationBar: BottomNavigationBar(
        showSelectedLabels: false,	// 아이콘 밑에 텍스트 숨기기 기능 
        showUnselectedLabels: false,
        onTap: (i){
          setState(() {
            tab = i;
          });
        },  // onTap = bottomNavigationBar용 onPressed
        items: [
          BottomNavigationBarItem(icon: Icon(Icons.home_outlined), label: '홈'),
          BottomNavigationBarItem(icon: Icon(Icons.shopping_bag_outlined), label: '샵'),
        ],
      ),

• onTab함수 위주로만 보자
• 이런 하단 탭바가 완성된다. (홈 누르면 홈페이지 샵누르면 샵페이지)