Flutter로 간단한 탭바(Tabs) 앱 만들기: 화면 전환 연습

안녕하세요! 이번에는 Flutter로 탭바(Tabs)를 활용한 앱을 만들어보겠습니다. 탭바는 여러 화면을 깔끔하게 전환할 수 있는 UI 구성 요소로, 앱의 내비게이션을 간단하고 직관적으로 구현할 수 있습니다. 이번 프로젝트에서는 TabBar와 TabBarView를 사용해 다중 화면 전환을 연습합니다.

 

 

목차

1. 탭바 앱 개요
2. Flutter에서 TabBar와 TabBarView 설정하기
3. 탭별 화면 구현하기
4. Flutter 초보자의 시행착오
5. 다음 단계: 더 고급스러운 탭바 UI 만들기

 

 

1. 탭바 앱 개요

목표 기능

• 상단에 탭바(TabBar)를 배치하여 여러 화면을 쉽게 전환.
• 각 탭에 다른 내용을 표시.
• 직관적인 화면 전환 효과 제공.

최종 결과

• 3개의 탭: "홈", "설정", "프로필".
• 각 탭에 서로 다른 내용을 표시.

 

 

2. Flutter에서 TabBar와 TabBarView 설정하기

실행 가능한 코드: 기본 탭바 구조

import 'package:flutter/material.dart';

void main() => runApp(TabsApp());

class TabsApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: TabsScreen(),
    );
  }
}

class TabsScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 3, // 탭 수 설정
      child: Scaffold(
        appBar: AppBar(
          title: Text("탭바 앱"),
          bottom: TabBar(
            tabs: [
              Tab(icon: Icon(Icons.home), text: "홈"),
              Tab(icon: Icon(Icons.settings), text: "설정"),
              Tab(icon: Icon(Icons.person), text: "프로필"),
            ],
          ),
        ),
        body: TabBarView(
          children: [
            Center(child: Text("홈 화면 내용")),
            Center(child: Text("설정 화면 내용")),
            Center(child: Text("프로필 화면 내용")),
          ],
        ),
      ),
    );
  }
}

 

728x90

 

3. 탭별 화면 구현하기

탭바 내용 확장하기

각 탭에 별도의 위젯이나 화면을 추가해 내용을 확장해 보겠습니다.

수정된 코드: 탭별 내용 추가

class TabsScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 3,
      child: Scaffold(
        appBar: AppBar(
          title: Text("탭바 앱"),
          bottom: TabBar(
            tabs: [
              Tab(icon: Icon(Icons.home), text: "홈"),
              Tab(icon: Icon(Icons.settings), text: "설정"),
              Tab(icon: Icon(Icons.person), text: "프로필"),
            ],
          ),
        ),
        body: TabBarView(
          children: [
            HomeTab(),
            SettingsTab(),
            ProfileTab(),
          ],
        ),
      ),
    );
  }
}

// 각 탭 화면 구성
class HomeTab extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text(
        "여기는 홈 화면입니다.",
        style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
      ),
    );
  }
}

class SettingsTab extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text(
        "설정 화면에 오신 것을 환영합니다.",
        style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
      ),
    );
  }
}

class ProfileTab extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text(
        "프로필 화면입니다.",
        style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
      ),
    );
  }
}

 

 

4. Flutter 초보자의 시행착오

1. DefaultTabController 생략 문제
   • TabBar와 TabBarView를 사용할 때 DefaultTabController를 생략해 오류가 발생했습니다.
   • 해결: DefaultTabController를 추가하여 탭 전환이 제대로 작동하도록 설정.
2. 탭바와 탭 내용 불일치 문제
   • TabBar의 탭 수와 TabBarView의 children 개수가 다르면 오류가 발생합니다.
   • 해결: 탭 수(length)와 children의 개수를 항상 일치시켰습니다.

 

 

5. 다음 단계: 더 고급스러운 탭바 UI 만들기

• 하단 탭바 추가
  • 상단 대신 하단에 BottomNavigationBar를 사용해 탭 UI 구성.
• 커스텀 스타일 적용
  • 탭바의 배경색, 텍스트 스타일, 활성/비활성 상태를 커스터마이즈.
• 페이지 상태 유지
  • 탭 전환 시 각 화면의 상태를 유지하도록 설정.

 

 

마무리

Flutter의 TabBar와 TabBarView를 사용해 간단한 탭바 앱을 만들어 보았습니다. 탭바는 여러 화면을 손쉽게 전환할 수 있는 강력한 도구이며, 앱의 내비게이션 구조를 디자인하는 데 매우 유용합니다.
혹시 이 프로젝트를 진행하며 궁금한 점이나 더 좋은 아이디어가 있다면 댓글로 공유해주세요! 다음에는 더 흥미로운 프로젝트로 돌아오겠습니다. 😊