플러터 페이지 분리 (탭 이용)

 

▲ 앱들 보면 하단버튼누르면 페이지를 이동시켜줍니다.

이런걸 만들어볼건데 페이지로 나누고 싶으면 여러가지 초이스가 있습니다.

페이지가 많으면 Router를 써도 되고 

Navigator를 써서 새로운 페이지를 위에 덮어씌워도 되고 

탭을 써도 됩니다. 탭을 만들어봅시다. 

 

왜냐면 웹 페이지는 페이지가 파일 단위로 명확히 존재합니다.

home.html

shop.html

이런 식으로 html 파일을 여러개 만들어놓고

유저가 shop페이지 원하면 shop.html 보여주면 되는 것이지만 

 

앱은 페이지가 1개입니다. 

그니까 하나의 main.dart 파일 안에서 여러분들이 home() 도 보여주고 shop() 도 보여줘야하는 것입니다. 

그래서 앱은 웹처럼 별도의 페이지 개념이 아니라

"유저가 shop보고 싶다그러면 home() 위젯 치우고 shop() 위젯을 보여주쇼"

이런 식으로 페이지를 구분합니다. 

실은 그냥 흔히보는 탭이랑 똑같습니다.

라우터도 탭임 그냥 

 

 

1. 현재 UI의 현재 상태를 저장할 state를 만들어둡니다

2. 그 state에 따라서 현재 UI가 어떻게 보일지 코드짜놓으면 됩니다. 

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

그럼 진짜 된다니까요 

 

 

그럼 탭을 만들려면 

1. 탭의 현재 상태를 저장할 state를 만들어둡니다. 

지금 몇번째 탭이 보이고 있는지 그런 정보를 저장할 state를 만드는 것임 

var tab = 1; 이런 식으로요 

2. 그 state에 따라서 탭이 어떻게 보일지 코드짜놓으면 되는 것임 

미리 위젯 2개를 만들어놓고

만약에 tab이 0이면 0번째 내용 보여주세요~

만약에 tab이 1이면 1번째 내용 보여주세요~

이렇게 코드짜면 됩니다. 

3. 유저도 state 조작쉽게할 수 있는 기능을 만들어줍니다.

3번은 선택사항입니다. 

 

 

 

 

 

1. 탭의 현재 상태를 저장할 state를 만들어둡니다. 

 

1번부터 만들어봅시다. 

state 만들어야하니까 MyApp이라는 위젯을 state넣을 수 있는 StatefulWidget으로 바꾸시길 바랍니다.

전구버튼 누르면 쉬울듯 

 

 

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  var tab = 0; 

  (하단생략)

▲ 그리고 state를 하나 만들고 현재 탭이 어떻게 보여야할지 저장해놓습니다.

저는 0이면 0번탭을 보여주는 상태,

1이면 1번탭을 보여주는 상태로 표현하고 싶어서 정수를 사용해봤고 

싫으면 var tab = 'home' 이래도 되고 

표현방법은 알아서 하면 됩니다.

 

 

 

 

 

 

2. 그 state에 따라서 탭이 어떻게 보일지 코드짜놓으면 되는 것임 

 

var tab이 0이면 첫째 탭내용을 보여주세요~

var tab이 1이면 둘째 탭내용을 보여주세요~

이렇게 코드짜놓으라는 소리입니다. 

그럼 끝임 

 

 

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

 

, 

Scaffold() 안에 body: 파라미터에 페이지 2개를 만들어봤습니다.

이려면 tab이 0이면 Text('홈페이지') 이게 보이고

이려면 tab이 1이면 Text('샵페이지') 이게 보이고

그러겠군요 그냥 List자료와 List자료에서 데이터 뽑는 문법이니까요 

 

 

 

 

 

 

3. 유저도 state 조작쉽게할 수 있는 기능

 

유저도 state를 쉽게 바꿀 수 있어야 편리하게 페이지 이동을 할 수 있겠군요. 

버튼0 누르면 tab을 0으로 

버튼1 누르면 tab을 1로 

변경하는 코드도 어디 심어놔야합니다. 

당연히 하단바에 숨겨놓도록 합시다. 

 

 

bottomNavigationBar: BottomNavigationBar(
    showUnselectedLabels: false,
    showSelectedLabels: false,
    currentIndex: pageNum,
    onTap: (i){
      setState((){
        pageNum = i;
      })
    }, 
    items: [ 생략 ]
)

BottomNavigationBar() 안에는 onTap: 파라미터를 추가할 수 있습니다.

이러면 눌렀을 때 코드를 실행해주는데

i라는 파라미터를 추가하면 지금 몇번째 버튼을 눌렀는지 알려줍니다.

0번 버튼 누르면 i는 0이 됩니다.

1번 버튼 누르면 i는 1이 됩니다. 

 

그럼 그걸 tab = i; 이렇게 넣어버리면

0번 버튼 누르면 tab이 0이 되고 그럼 Text('홈페이지')가 보이고

1번 버튼 누르면 tab이 1이 되고 그럼 Text('샵페이지')가 보이고 

그럼 탭 완성한 것 같은데요