플러터에서 하단 탭 만들기

 

플러터로 앱을 만들다 보면 하단 탭을 자주 사용하게 돼요. 하단 탭을 사용하면 여러 화면을 손쉽게 전환할 수 있어서 사용자 경험이 좋아져요. 이번 글에서는 아주 간단한 방법으로 하단 탭을 구현하는 방법을 설명할게요. 크게 세 단계로 나누어서 살펴볼 거예요.

 

 

State 만들기

먼저 하단 탭을 만들려면 현재 선택된 탭이 어떤 것인지 기억하기 위한 상태(State)가 필요해요. Flutter에서는 StatefulWidget과 setState를 사용해 손쉽게 상태를 관리할 수 있어요. 우선 상태를 관리하기 위한 기본적인 구조를 만들어볼게요.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(home: BottomTabExample());
  }
}

class BottomTabExample extends StatefulWidget {
  @override
  _BottomTabExampleState createState() => _BottomTabExampleState();
}

class _BottomTabExampleState extends State<BottomTabExample> {
  int _selectedIndex = 0; // 현재 선택된 탭 상태를 저장해요.

  @override
  Widget build(BuildContext context) {
    return Scaffold();
  }
}

여기까지 하면 상태를 관리할 준비가 끝났어요. 이제 각 상태마다 화면을 다르게 만들어줄 거예요.

두 번째로 해야 할 일은 상태에 따라 다른 UI를 만드는 거예요. 각 탭을 눌렀을 때 화면에 보여줄 간단한 UI를 만들어 볼게요. 이를 위해 화면에 표시할 위젯들을 미리 만들어놓고 상태에 따라 바꿔서 보여줄 수 있도록 준비해요.

 

 

상태마다 들어갈 UI 구성하기

// 아까 코드에서 build 메서드 내부를 다음과 같이 바꿔주세요.

@override
Widget build(BuildContext context) {
  List<Widget> screens = [
    Center(child: Text('홈 화면')),
    Center(child: Text('검색 화면')),
    Center(child: Text('프로필 화면')),
  ];

  return Scaffold(
    appBar: AppBar(title: Text('하단 탭 예제')),
    body: screens[_selectedIndex], // 상태에 따라 화면이 바뀌어요.
  );
}

이렇게 상태마다 서로 다른 UI가 표시되도록 만들었어요. 마지막으로 사용자가 직접 상태를 변경할 수 있도록 하단 탭 버튼을 추가해 볼게요.

 

 

사용자가 상태를 변경할 수 있도록 구현하기

지금까지 상태(State)를 만들고 각 상태마다 화면을 다르게 구성하는 방법을 알아봤어요. 이제 사용자가 직접 하단 탭 버튼을 눌러 상태를 변경하도록 구현해볼게요. 플러터에서 상태를 바꾸려면 setState()라는 메서드를 사용해야 해요.

아래의 예시 코드처럼 BottomNavigationBar를 추가하고, 버튼이 눌릴 때마다 현재 선택된 탭 상태를 변경해줄 거예요.

@override
Widget build(BuildContext context) {
  List<Widget> screens = [
    Center(child: Text('홈 화면')),
    Center(child: Text('검색 화면')),
    Center(child: Text('프로필 화면')),
  ];

  return Scaffold(
    appBar: AppBar(title: Text('하단 탭 예제')),
    body: screens[_selectedIndex], // 현재 상태에 따라 화면이 바뀌어요.
    bottomNavigationBar: BottomNavigationBar(
      currentIndex: _selectedIndex, // 현재 선택된 탭
      onTap: (int index) { // 탭이 눌리면 실행할 메서드
        setState(() {
          _selectedIndex = index; // 상태를 변경해요.
        });
      },
      items: [
        BottomNavigationBarItem(icon: Icon(Icons.home), label: '홈'),
        BottomNavigationBarItem(icon: Icon(Icons.search), label: '검색'),
        BottomNavigationBarItem(icon: Icon(Icons.person), label: '프로필'),
      ],
    ),
  );
}

이렇게 하면 사용자가 하단 버튼을 클릭할 때마다 화면이 자연스럽게 전환돼요. 이제 사용자는 화면을 바꾸기 위해 추가적인 액션을 할 필요가 없고, 앱이 직관적이고 편리해지죠.

 

 

마치며...

지금까지 플러터에서 상태(State)를 관리하며 하단 탭을 쉽게 구성하는 방법을 알아봤어요. Flutter는 위젯 기반으로 UI를 구성하기 때문에 상태 관리와 화면 전환이 아주 쉽고 간단해요. 하단 탭을 만들 때 이 세 가지 방법만 기억하면 앞으로 앱을 만들 때도 쉽게 활용할 수 있을 거예요.

1. 상태(state)를 선언하고,
2. 각 상태에 따른 화면을 만들어주고,
3. 사용자가 버튼을 통해 상태를 바꿀 수 있게 해줘요.

이 방법을 잘 기억하고, 앞으로 더 다양한 앱에 활용해 보세요!