KyungRyeol Yoon KyungRyeol Yoon
Frontend · Flutter ·

[Flutter] RootTab

· 2분 읽기

RootTab #

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

TabBarView #

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

설명 참고 {: .prompt-info }

Flutter 프로젝트 생성 #

1코드 복사
2flutter create my_app
3cd my_app

필요한 패키지 추가 #

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

기본 UI 구성 #

  • lib/main.dart 파일을 열고 아래의 코드를 작성한다.
     1import 'package:flutter/material.dart';
 2
 3void main() {
 4  runApp(MyApp());
 5}
 6
 7class MyApp extends StatelessWidget {
 8  @override
 9  Widget build(BuildContext context) {
10    return MaterialApp(
11      title: 'Flutter Tab Example',
12      home: HomeScreen(),
13    );
14  }
15}
16
17class HomeScreen extends StatelessWidget {
18  @override
19  Widget build(BuildContext context) {
20    return DefaultTabController(
21      length: 3, // 탭의 개수
22      child: Scaffold(
23        appBar: AppBar(
24          title: Text('Root Tab Example'),
25          bottom: TabBar(
26            tabs: [
27              Tab(text: 'Tab 1'),
28              Tab(text: 'Tab 2'),
29              Tab(text: 'Tab 3'),
30            ],
31          ),
32        ),
33        body: TabBarView(
34          children: [
35            Center(child: Text('Content for Tab 1')),
36            Center(child: Text('Content for Tab 2')),
37            Center(child: Text('Content for Tab 3')),
38          ],
39        ),
40      ),
41    );
42  }
43}

코드 설명 #

기본 구조 #

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

HomeScreen 클래스 #

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

실행하기 #

1flutter run

탭 사용하기 #

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

추가 기능 #

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

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

  • 탭 간 전환 애니메이션: 기본적으로 Flutter에서 제공하는 전환 애니메이션을 사용하여 사용자 경험을 향상시킬 수 있다.

  • 상태 관리: 탭 간의 상태를 유지하기 위해 상태 관리 라이브러리(예: Provider, Riverpod)를 사용할 수 있다.

Advertisement
관련 글