플러터 시작하기 03. BottomNavigationBar을 사용해 탭 만들기

많은 앱들이 하단 메뉴를 통해 탭 전환을 하는 형태로 디자인되어 있습니다. Scaffold의 여러 속성 중 bottomNavigationBar 속성이 바로 이 기능을 담당합니다. 이번 포스트에서는 bottomNavigationBar 속성을 소개해 드리면서 탭 전환을 어떻게 해야 하는지 함께 알려드리도록 하겠습니다.

---

플러터 시작하기 01 : Scaffold

플러터 시작하기 02. Appbar 꾸미기

---

Items 속성

Scaffold(
    body: SafeArea(child: _views.elementAt(_currentIdx)),
    bottomNavigationBar: BottomNavigationBar(
        items: const [
            BottomNavigationBarItem(icon: Icon(Icons.home), label: 'home'),
            BottomNavigationBarItem(icon: Icon(Icons.account_circle), label: 'account'),
            BottomNavigationBarItem(icon: Icon(Icons.menu), label: 'menu'),
        ],
    ),
)

BottomNavigationBar 속성에는 두 가지 위젯을 사용할 수 있습니다. BottomAppBar과 이번에 배울 BottomNavigationBar 위젯입니다. Scaffold를 소개해 드리면서도 간단하게 알려드렸지만, BottomAppBar 위젯은 웹사이트의 푸터처럼 앱 하단을 꾸밀 때 많이 사용하고요, BottomNavigationBar은 앱 하단에 탭 메뉴를 구현할 때 많이 사용합니다. BottomNavigationBar 위젯은 item 속성이 필수로 입력돼야 합니다. BottomNavigationBarItem의 리스트로 구성되어 있고, 각 아이템에는 아이콘과 이름 등을 설정할 수 있습니다. 우선 가볍게 세 개의 아이템을 추가해 보도록 하겠습니다.

탭 전환하기

class BottomNavigationBarExample extends StatefulWidget {
  const BottomNavigationBarExample({super.key});

  @override
  State<BottomNavigationBarExample> createState() =>
      _BottomNavigationBarExampleState();
}

class _BottomNavigationBarExampleState extends State<BottomNavigationBarExample> {
  int _currentIdx = 0;

  final List<Widget> _views = [
    const HomeView(),
    const AccountView(),
    const MenuView()
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(child: _views.elementAt(_currentIdx)),
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _currentIdx,
        onTap: _tabTapped,
        items: const [
          BottomNavigationBarItem(icon: Icon(Icons.home), label: 'home'),
          BottomNavigationBarItem(
              icon: Icon(Icons.account_circle), label: 'account'),
          BottomNavigationBarItem(icon: Icon(Icons.menu), label: 'menu'),
        ],
      ),
    );
  }

  void _tabTapped(int idx) {
    setState(() {
      _currentIdx = idx;
    });
  }
}

탭 전환이 가능하도록 구현하기 위해서는 우선 stateful widget 클래스에 속해있어야 합니다. Stateful widget은 다른 포스트에서 상세하게 설명드리겠지만 간단하게 알려드리자면 화면이 업데이트되어 새로 그려질 수 있도록 해주는 클래스입니다. 화면이 전환된 탭에 맞춰 새로 그려져야 하기 때문에 stateful widget 클래스를 사용한다고 생각하시면 되겠습니다.

우선은 선택된 탭을 저장할 변수 _currentIdx와 각 탭을 선택했을 때 보여줄 페이지의 리스트 _views를 생성해 줍시다. BottomNavigationBar는 각 탭이 인덱스 값으로 지정이 되기 때문에 이렇게 리스트로 만들면 간단하게 각 페이지를 불러올 수 있습니다. 그리고 마지막으로 각 탭을 선택했을 때 _currentIdx가 바뀔 수 있도록 해주는 _tabTapped 함수를 만들어 주겠습니다. 여기서 사용된 setState 함수는 어떤 변수의 값이 바뀌었고, 따라서 화면을 재구성하라는 신호를 주는 함수입니다. 이제 모든 준비가 끝났습니다.

이제 위 예제 코드를 참조해 BottomNavigationBar의 속성 중 currentIndex 속성과 onTap 속성에 방금 생성한 변수와 함수를 입력해 주면 됩니다. 그리고 scaffold의 body 속성에는 _view에서 현재 선택된 탭의 인덱스 위치에 있는 페이지를 반환해 주도록 해주면 됩니다. 이제 탭을 한 번 터치해 보세요. 선택된 탭이 변하면서 body에도 각 페이지가 그려지는 것을 볼 수 있습니다.

탭 색상 변경하기

BottomNavigationBar(
    ...
    selectedItemColor: Colors.black,
    unselectedItemColor: Colors.grey,
    backgroundColor: Colors.white,
),

탭의 색상을 담당하는 세 가지 속성들이 있습니다. SelectedItemColor는 선택된 탭의 아이콘과 레이블 색을, unselectedItemColor는 선택되지 않은 나머지 탭의 아이콘과 레이블 색을, 그리고 backgroundColor는 내비게이션 바의 색 자체를 담당합니다. 위 예제 코드를 참조해서 원하는 색으로 변경해 보세요.

크기 조정하기

BottomNavigationBar(
    ...
    selectedFontSize: 14,
    unselectedFontSize: 12,
    iconSize: 24,
),

레이블의 크기도 조절이 가능합니다. SelectedFontSize는 선택된 탭의 레이블 크기를, unselectedFontSize는 선택되지 않은 탭의 레이블 크기를 설정합니다. 기본값으로는 각 14, 12 포인트가 설정돼 있습니다. 아이콘 크기를 설정하기 위해서는 iconSize 속성에 값을 입력해 주면 됩니다. 기본값은 24입니다.

햅틱 설정하기

BottomNavigationBar(
    ...
    enableFeedback: true,
),

EnableFeedback 속성을 참으로 설정하면 탭을 선택할 때 햅틱 반응을 받을 수 있습니다. 하지만 UI/UX 측면에서 햅틱이 많이 들어간다고 좋은 것은 아니기 때문에 필요한 기능인지 잘 고민해 보시고 사용하시면 좋을 것 같네요.

이번 포스트에서는 BottomNavigationBar에서 탭을 전환하는 방법과 디자인 속성들에 대해서 알려드렸습니다. 테마 설정과 같은 기능들도 있는데, 다른 포스트에서 심화적으로 다뤄보도록 하겠습니다.

---

플러터 시작하기 04. FloatingActionButton 꾸미기