Flutter에서 BottomNavigationBar로 간편한 화면 전환 구현하기

들어가기 전에

모바일 앱을 개발할 때, 여러 화면을 손쉽게 전환할 수 있는 내비게이션 시스템은 필수적입니다. Flutter는 다양한 내비게이션 도구를 제공하며, 그중에서도 BottomNavigationBar 위젯은 하단 탭으로 여러 화면을 효율적으로 관리하는 데 유용한 도구입니다. 이 위젯은 많은 앱에서 자주 사용되며, 간결하고 직관적인 사용자 인터페이스를 제공합니다. 이번 글에서는 Flutter에서 BottomNavigationBar 위젯을 활용해 화면을 전환하는 방법과 사용법을 구체적으로 살펴보겠습니다.

---

BottomNavigationBar란?

BottomNavigationBar는 Flutter의 내비게이션 위젯 중 하나로, 화면 하단에 탭을 배치해 여러 화면을 쉽게 이동할 수 있도록 도와줍니다. 보통 3개에서 5개의 탭으로 구성되며, 각 탭을 누르면 해당 화면으로 전환됩니다. 이 위젯은 주로 홈 화면, 탐색 화면, 설정 화면 등으로 구성된 앱에서 활용됩니다.

BottomNavigationBar를 사용하면 앱의 여러 페이지를 손쉽게 관리할 수 있으며, 사용자는 하단 탭을 통해 각 페이지를 빠르게 탐색할 수 있습니다. 또한, 이 위젯은 Flutter의 Scaffold 위젯과 함께 사용되어 하단에 고정된 탭을 유지하면서 각 페이지의 컨텐츠를 바꿀 수 있습니다.

BottomNavigationBar 기본 사용법

BottomNavigationBar를 사용하려면 기본적으로 Scaffold 위젯의 bottomNavigationBar 속성에 넣어줍니다. 각 탭을 클릭할 때마다 화면이 전환되는 구조를 구현할 수 있으며, 아래는 기본적인 예제입니다.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

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

class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  int _selectedIndex = 0;
  static const List<Widget> _widgetOptions = <Widget>[
    Text('홈 화면'),
    Text('탐색 화면'),
    Text('설정 화면'),
  ];

  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('BottomNavigationBar 예제'),
      ),
      body: Center(
        child: _widgetOptions.elementAt(_selectedIndex),
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: '홈',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.search),
            label: '탐색',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.settings),
            label: '설정',
          ),
        ],
        currentIndex: _selectedIndex,
        selectedItemColor: Colors.blue,
        onTap: _onItemTapped,
      ),
    );
  }
}

설명:

1. BottomNavigationBar: 세 개의 탭(홈, 탐색, 설정)이 있는 하단 바를 생성했습니다. BottomNavigationBarItem을 통해 각 탭에 아이콘과 라벨을 부여합니다.
2. currentIndex: 현재 선택된 탭을 나타냅니다. _selectedIndex로 상태를 관리하며, onTap 메서드를 통해 탭을 클릭할 때마다 인덱스가 변경됩니다.
3. onTap: 탭을 클릭했을 때 호출되는 함수로, 탭 인덱스를 받아와 화면을 전환하는 로직을 구현했습니다.

BottomNavigationBar 주요 속성

• items: 각 탭을 정의하는 리스트입니다. BottomNavigationBarItem을 통해 아이콘과 라벨을 지정할 수 있습니다.
• currentIndex: 현재 선택된 탭의 인덱스를 나타내며, 선택된 아이템의 스타일을 적용하는 데 사용됩니다.
• onTap: 탭을 눌렀을 때 호출되는 콜백 함수입니다. 보통 이 함수에서 setState를 사용해 상태를 업데이트하고 화면을 전환합니다.
• selectedItemColor: 선택된 탭의 색상을 설정합니다.
• unselectedItemColor: 선택되지 않은 탭의 색상을 설정합니다.
• type: 탭이 몇 개일 때 레이아웃을 어떻게 구성할지 정의합니다. BottomNavigationBarType.fixed와 BottomNavigationBarType.shifting이 있으며, 고정형 또는 이동형으로 탭을 구성합니다.

고급 사용법: 페이지와 상태 유지

위의 기본 예제는 간단하게 하나의 페이지를 보여주지만, 실제 앱에서는 여러 페이지를 관리해야 합니다. Flutter에서 IndexedStack을 사용하면, 각 페이지의 상태를 유지하면서도 간단하게 화면을 전환할 수 있습니다.

class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  int _selectedIndex = 0;

  final List<Widget> _pages = [
    HomePage(),
    ExplorePage(),
    SettingsPage(),
  ];

  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('BottomNavigationBar 예제'),
      ),
      body: IndexedStack(
        index: _selectedIndex,
        children: _pages,
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: '홈',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.search),
            label: '탐색',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.settings),
            label: '설정',
          ),
        ],
        currentIndex: _selectedIndex,
        selectedItemColor: Colors.blue,
        onTap: _onItemTapped,
      ),
    );
  }
}

IndexedStack 설명:

IndexedStack은 페이지의 상태를 유지하면서 화면 전환을 할 수 있는 위젯입니다. 여러 페이지를 리스트로 관리하며, _selectedIndex 값을 기반으로 현재 활성화된 페이지를 렌더링합니다.

BottomNavigationBar 활용 팁

1. 아이콘 및 라벨 스타일링: selectedItemColor와 unselectedItemColor를 적절히 활용해 선택된 탭과 그렇지 않은 탭의 차이를 분명하게 만들어 줍니다.
2. 탭의 개수 조정: BottomNavigationBarType을 사용해 탭의 개수가 많을 때도 가독성을 유지할 수 있도록 디자인합니다. fixed 타입은 고정된 레이아웃을 제공하며, shifting 타입은 탭 선택에 따라 애니메이션이 적용됩니다.
3. 상태 유지: 페이지 전환 시 이전 상태를 유지하려면 IndexedStack과 같은 위젯을 사용하여 상태 관리에 신경 써야 합니다. 이를 통해 사용자가 페이지를 다시 방문했을 때도 이전 정보를 유지할 수 있습니다.
4. 애니메이션 효과 추가: BottomNavigationBar와 함께 Flutter의 다양한 애니메이션 위젯을 사용해 더 매끄러운 사용자 경험을 제공할 수 있습니다.

결론

BottomNavigationBar는 Flutter에서 간단하고 직관적인 내비게이션 방법을 제공합니다. 특히 다중 화면을 가진 앱에서 사용하기 좋으며, BottomNavigationBarItem을 통해 쉽게 아이콘과 라벨을 추가할 수 있습니다. 이번 포스트에서는 기본적인 BottomNavigationBar 사용법부터 IndexedStack을 활용한 고급 화면 전환 방법까지 살펴보았습니다. 이 글을 참고하시고BottomNavigationBar를 사용해 여러분의 앱에 더 나은 사용자 경험을 제공하는데 도움이 되었으면 좋겠습니다.