Tab view 를 flutter에서 적용해 보겠습니다.

Tab view 위젯을 fluuter 에 적용해 보겠습니다.

우선 아래 화면을 보시기 바랍니다.

 

 

보셨나요?

요렇게, 특정 탭을 터치할때마다 화면이 바뀌는 걸 TabView 라고 보시면 될듯합니다.

상단 아이콘을  터치할때 마다 한글 문구가 변동되고 있습니다. (전체 화면으로 보시는 편이 좋을듯합니다~)

 

왜필요할까요? 

보통 플러터(flutter)에서 화면을 이동할때는 Navigator 를 이용해 이동하기도 하지만, (이때는 스택구조로 한 화면에 쌓는 방식으로)

이동이 됩니다.

하지만 이 tabview 사용하면 body 는 하나로 구성하면서 여러개의 내용을 보여줄수 있습니다.

어떻게 사용하는지 구조를 살펴보겠습니다.

 

[main.dart 에 사용할 컨트롤러를 지정해 줍니다.

=> 아래 DefaultTabController (length:3,  요건 탭의 갯수를 의미함)

 home: DefaultTabController(length: 3,
       child: MyHomePage(title: 'Flutter Demo Home Page'),
));

 

그리고, 상기 자식위젯인 MyHomePage 위젯내에 아래와 같이 선언합니다.

return Scaffold(
  appBar: AppBar(
    bottom:
      TabBar(
          tabs:
  [ Tab(icon: Icon(Icons.directions_bike)),
    Tab(icon: Icon(Icons.directions_transit)),
    Tab(icon: Icon(Icons.directions_boat)),

 Tabbar 3곳에 각각 아이콘을 셋팅해 둡니다. 

 터치 모션은 지정하지 않아도 자동 동작이 됩니다.

 

body: const TabBarView(
    children: [
       Text("바이크",style: TextStyle(fontSize: 30,color: Colors.lightBlue)),
       Text("교통",style: TextStyle(fontSize: 30,color: Colors.redAccent)),
       Text("보트",style: TextStyle(fontSize: 30,color: Colors.purpleAccent)),
    ],)

이곳 body에 나타날(표현할)내용을 코딩해 놓습니다.

 

아래와 같이 위젯을 분리하여 코딩해도 나쁘지 않습니다.~

 body: TabBarView(
        children: [
         first(tmpnumber+0),
         second(tmpnumber+1),
         third(tmpnumber+2),
        ],)
  );
}
Widget first(int text) {
  return
    Column(
        children: [
        Text("바이크",style: TextStyle(fontSize: 30,color: Colors.lightBlue)),
        Text(text.toString()),
        ],
    );
}

Widget second(int value) {
  return
    Column(
        children: [
        Text("교통",style: TextStyle(fontSize: 30,color: Colors.redAccent)),
        Text(value.toString()),
        ],
    );
}

Widget third(int value) {
  return
  Column(
    children: [
      Text("요트",style: TextStyle(fontSize: 30,color: Colors.redAccent)),
      Text(value.toString()),
    ],
  );
}

 요렇게 살짝 변경하면 아이콘 터치시 숫자가 더해진 결과가 같이 나와줍니다.

 

좀더 심화과정을 보겠습니다.

위와 같이 진행하면 탭바간에 이동은 문제없습니다. 

하지만 각 탭바의 화면에서 또다른 페이지로 이동을 해야하고 되돌아 왔을때, 마지막으로 보았던 페이지를 유지해서 

보여주려면 어떻게 해야할까요?

 -globalKey / Offstage / Stack 을 활용해야 합니다.