23. [Flutter] TabBarView 화면 넘기기 기능 만들기

화면을 넘기는 TabBarView를 구현하기 위해서는 아래 3가지 위젯이 필요합니다.

 

TabBarView:
TabBarView는 여러 개의 탭에 대한 내용을 표시하기 위한 위젯입니다. 

각 탭에 대한 컨텐츠를 생성하고, 사용자가 탭을 선택할 때 해당하는 내용이 표시됩니다. 

TabBarView는 DefaultTabController와 함께 사용되며, children 속성을 통해 각 탭에 대한 위젯들을 정의합니다.

DefaultTabController:
DefaultTabController는 TabBar와 TabBarView를 연결하고, 탭의 개수와 액션을 관리하는 위젯입니다. 

DefaultTabController는 length 속성을 통해 탭의 개수를 설정하고, child 속성에 TabBar와 TabBarView를 포함하는 위젯을 정의합니다. 

TabBar와 TabBarView는 DefaultTabController의 조상 위젯으로부터 탭의 개수와 액션을 상속받게 됩니다.

TabPageSelector:
TabPageSelector는 탭을 선택하는 데 사용되는 위젯 중 하나로, 일련의 페이지나 탭을 표시하는 동그란 인디케이터를 제공합니다. 

TabPageSelector는 TabBarView와 함께 사용되며, 선택된 탭을 시각적으로 나타내는 역할을 합니다. 

인디케이터의 크기와 색상은 TabPageSelector의 속성을 통해 설정할 수 있습니다. 

사용자가 인디케이터를 탭하여 원하는 탭으로 이동할 수 있습니다.

위의 세 가지 위젯을 함께 사용하면, 탭 기반의 네비게이션을 구현할 수 있습니다. DefaultTabController는 탭의 개수와 액션을 관리하고, TabBarView는 각 탭에 대한 내용을 표시하며, TabPageSelector는 선택된 탭을 시각적으로 나타냅니다. 이를 통해 사용자는 탭을 선택하고 해당하는 내용을 볼 수 있게 됩니다.

---

예시.

import 'package:flutter/material.dart';

class TestScreen extends StatefulWidget {
  const TestScreen({super.key});

  @override
  State<TestScreen> createState() => _TestScreenState();
}

class _TestScreenState extends State<TestScreen> {
  @override
  Widget build(BuildContext context) {
    return const DefaultTabController(
      length: 3,
      animationDuration: Duration(milliseconds: 300),
      child: Scaffold(
        body: SafeArea(
            child: TabBarView(children: [
          Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              Text(
                'First Screen',
                style: TextStyle(fontSize: 32),
              ),
            ],
          ),
          Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              Text(
                'Second Screen',
                style: TextStyle(fontSize: 32),
              ),
            ],
          ),
          Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              Text(
                'Third Screen',
                style: TextStyle(fontSize: 32),
              ),
            ],
          ),
        ])),
        bottomNavigationBar: Row(
          crossAxisAlignment: CrossAxisAlignment.center,
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            BottomAppBar(
              elevation: 0,
              padding: EdgeInsets.all(40),
              child: TabPageSelector(
                indicatorSize: 20,
                color: Colors.lightBlue,
                selectedColor: Colors.pink,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

1. DefaultTabController 의 Length 속성에 Page의 갯수를 입력합니다.
2. TabBarView의 Children 속성에 위 갯수 만큼 자식 위젯을 넣어줍니다.
3. BottomAppBar에 TabPageSelector를 넣어서 현재 보고있는 화면의 순서를 표시합니다.