[Flutter] RootTab

RootTab

• 정의: 일반적으로 “RootTab”은 여러 개의 탭을 상단에 배치하여 사용자가 여러 화면을 쉽게 전환할 수 있게 하는 UI 구성 요소를 의미한다.
• 구성: 각 탭은 사용자가 선택할 수 있는 특정 항목을 나타낸다. 이 탭은 일반적으로 TabBar 위젯을 통해 생성된다.

TabBarView

• 정의: TabBarView는 TabBar와 함께 사용되는 위젯으로, 각 탭에 해당하는 내용을 표시한다.
• 구성: TabBarView는 여러 개의 자식 위젯을 받아서 각 탭이 선택될 때 보여줄 내용을 정의한다. 각 탭에 대해 해당하는 콘텐츠를 작성할 수 있다.

설명 참고

Flutter 프로젝트 생성

코드 복사
flutter create my_app
cd my_app

필요한 패키지 추가

• 기본적으로 material.dart만 있으면 충분하다.
• 추가적인 패키지는 필요하지 않다.

기본 UI 구성

• lib/main.dart 파일을 열고 아래의 코드를 작성한다.

  import 'package:flutter/material.dart';
  
  void main() {
    runApp(MyApp());
  }
  
  class MyApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
      return MaterialApp(
        title: 'Flutter Tab Example',
        home: HomeScreen(),
      );
    }
  }
  
  class HomeScreen extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
      return DefaultTabController(
        length: 3, // 탭의 개수
        child: Scaffold(
          appBar: AppBar(
            title: Text('Root Tab Example'),
            bottom: TabBar(
              tabs: [
                Tab(text: 'Tab 1'),
                Tab(text: 'Tab 2'),
                Tab(text: 'Tab 3'),
              ],
            ),
          ),
          body: TabBarView(
            children: [
              Center(child: Text('Content for Tab 1')),
              Center(child: Text('Content for Tab 2')),
              Center(child: Text('Content for Tab 3')),
            ],
          ),
        ),
      );
    }
  }
  

코드 설명

기본 구조

• main() 함수: 애플리케이션의 진입점이다. runApp(MyApp())를 통해 Flutter 앱을 실행한다.
• MyApp 클래스: MaterialApp 위젯으로 앱의 기본적인 스타일을 제공한다.

HomeScreen 클래스

• DefaultTabController: 탭을 관리하는 컨트롤러로, 탭의 개수를 length 속성으로 지정한다.
• Scaffold: 앱의 기본 레이아웃을 제공하는 위젯이다.
• AppBar: 상단에 위치하며, 앱의 제목과 TabBar를 포함한다. TabBar는 각각의 탭을 정의한다.
• TabBar: 각 탭을 표시하는 위젯으로, Tab 위젯을 리스트로 포함한다. 여기서는 3개의 탭을 정의했다.
• TabBarView: 각 탭에 대한 내용을 표시하는 위젯이다. children 속성에는 각 탭에 맞는 위젯을 포함한다. 여기서는 각 탭에 대한 간단한 텍스트를 사용했다.

실행하기

flutter run

탭 사용하기

• 앱이 실행되면 상단에 3개의 탭이 표시된다.
• 각 탭을 클릭하면 해당하는 내용이 아래에 표시된다.
• 이로써 기본적인 Root Tab 구성이 완료되었다.

추가 기능

• 탭 아이콘 추가: 각 탭에 아이콘을 추가할 수 있다.

  Tab(icon: Icon(Icons.home), text: 'Tab 1'),
  

• 탭 간 전환 애니메이션: 기본적으로 Flutter에서 제공하는 전환 애니메이션을 사용하여 사용자 경험을 향상시킬 수 있다.
• 상태 관리: 탭 간의 상태를 유지하기 위해 상태 관리 라이브러리(예: Provider, Riverpod)를 사용할 수 있다.