Do it! 플러터 Tabbar 구조 및 구현

플러터 TabBarView, Tabbar 만들기

여러 페이지를 만들고 이동하기 위해 Navigator로 이동하는 것도 있지만, 우선 많이 이용하는 탭바를 먼저 알아보겠습니다. 

1. 먼저 Tabcontroller를 선언하고, 탭의 갯수를 정해줍니다. 

추가로, 클래스 선언할 때, with SingleTickerProviderStateMixin를 추가해야 탭을 눌렀을 때, 애니메이션 동작을 처리할 수있게 합니다. 필수입니다.

class _MyHomePageState extends State<MyHomePage>
  with SingleTickerProviderStateMixin {

  TabController? tabController;

  @override
  void initState() {
    tabController = TabController(length: 3, vsync: this);
    super.initState();
  }

2. dispose() 함수에서 메모리 누수를 막아야 합니다.

class _MyHomePageState extends State<MyHomePage>
  with SingleTickerProviderStateMixin {

@override
void dispose() {
	controller.dispose();
    super.dispose();
}

3. Scafold(appBar, body, bottomNavigationBar) 구조에서

• 1안) body안에 TabBarView를 선언하고, bottomNavigationBar안에 TabBar를 선언
• 2안) appBar>AppBar>bottom>TabBar에 icond을 정의하고, body>TabBarView를 정의

1안)
  @override
  Widget build(BuildContext context) {
    // Scaffold로 appBar, body, bottomNavigation를 선언한다.
    return Scaffold(
      appBar: AppBar(
        title: Text('TabBar Example'),
      ),
      // body에 TabBarView을 bottomNavigationBar에 TabBar 위젯을 넣는다.
      body: TabBarView(
        children: <Widget>[
          FirstApp(),
          SecondApp(),
        ],
        controller: controller,
      ),
      bottomNavigationBar: TabBar(
        tabs: <Tab>[
          Tab(
            icon: Icon(Icons.looks_one, color: Colors.blue),
          ),
          Tab(
            icon: Icon(Icons.looks_two, color: Colors.blue),
          )
        ],
        controller: controller,
      ),
    );
  }

2안)
@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        bottom: TabBar(
          controller: tabController,
          tabs: [
            Tab(
              text: 'First',
            ),
            Tab(
              text: 'Second',
            ),
            Tab(
              text: 'Third',
            ),
          ],
        ),
      ),
      body: TabBarView(
        controller: tabController,
        children: [
          Container(
            color: Colors.red,
          ),
          WillPopScope(
            onWillPop: () async {
              tabController?.animateTo(0, duration: Duration(milliseconds: 500),);
              return false;
            },
            child: Container(
              color: Colors.yellow,
            ),
          ),
          WillPopScope(
            onWillPop: ()async {
              tabController?.animateTo(1, duration: Duration(milliseconds: 500),);
              return false;
            },
            child: Container(
              color: Colors.green,
            ),
          ),
        ],
      ),
    );
  }

탭바 구현 화면

요약
• 탭바로 다양한 내용을 화면 전환으로 보여줄 수 있다.
• 인터넷 예제 소스를 그대로 사용할 경우 오류가 날 때, 원인을 보고 null safety 문제라면 변수에 '?' 를 추가하면 해결