Flutter Material 디자인 - BottomNavigationBar (탭 바)

플러터의 Material 디자인이 담긴 Material 위젯에서는 탭 바를 BottomNavigationBar 클래스에서 제공하고 있습니다. Material 위젯에서 기본적으로 제공하는 샘플을 통해 동작을 살펴보겠습니다. Bottom Navigation Bar는 클릭한 탭의 정보를 업데이트해서 보여주기 때문에 Stateful 위젯이고, 화면 구성 시에 주로 Scaffold 위젯에서 하단에 Floating Action Button 대신 Bottom Navigation Bar를 보여주는 형식을 따르게 됩니다.   Bottom Navigation Bar에서 개별 탭은 BottomNavigationBarItem 위젯을 통해 구성하고 있습니다.

Bottom Navigation Bar 샘플 프로젝트 생성 후 실행하기

샘플 프로젝트는 터미널에서 flutter create --sample=material.BottomNavigationBar.1 mysample 커맨드를 통해 생성합니다. (https://api.flutter.dev/flutter/material/BottomNavigationBar-class.html  참고) 그 다음 studio mysample 커맨드로 Android Studio에서 프로젝트를 열어줍니다. 프로젝트를 실행하면 다음과 같이 BottomNavigationBar Sample이라는 타이틀을 단 앱이 나타나는데요, 하단에 Home, Business, School이라는 탭이 보이고 각각을 클릭하면 선택된 탭의 색이 주황색(amber)으로 변하고, 화면 중앙에 해당 탭의 인덱스와 탭 이름을 보여주게 됩니다.

Bottom Navigation Bar 샘플 프로젝트 구조 살펴보기

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  int _selectedIndex = 0;
  static const TextStyle optionStyle =
      TextStyle(fontSize: 30, fontWeight: FontWeight.bold);
  static const List<Widget> _widgetOptions = <Widget>[
    Text(
      'Index 0: Home',
      style: optionStyle,
    ),
    Text(
      'Index 1: Business',
      style: optionStyle,
    ),
    Text(
      'Index 2: School',
      style: optionStyle,
    ),
  ];
  
    void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }

Bottom Navigation Bar 각각의 탭에서 보여주는 텍스트는 _widgetOptions라는 위젯 리스트에서 Text 위젯에 담아 보여주고 있습니다. 특정 탭을 클릭하게 되면 _onItemTapped 함수가 불리면서 인자로 선택된 탭의 index가 넘어가고, 이 함수 안에서 내부 변수인 _selectedIndex에 해당 인자를 넣어주고 있습니다.

Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('BottomNavigationBar Sample'),
      ),
      body: Center(
        child: _widgetOptions.elementAt(_selectedIndex),
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: 'Home',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.business),
            label: 'Business',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.school),
            label: 'School',
          ),
        ],
        currentIndex: _selectedIndex,
        selectedItemColor: Colors.amber[800],
        onTap: _onItemTapped,
      ),
    );
  }

실제 화면을 뿌려주는 build 위젯에서는 앱 타이틀, 선택된 탭의 텍스트, Bottom Navigation Bar의 탭들을 어떻게 보여줄지에 대한 정보를 담고 있습니다. 가장 마지막 3줄을 보면, 탭 클릭시 선택된 탭의 인덱스를 _selectedIndex에 넣어주고, 선택된 탭의 컬러는 amber 색상 중 어두운 계열인 800으로, 탭 클릭 시에는 _onItemTapped 함수를 호출하게 되어있습니다. 

 

컬러 선택하기

이 예제의 핵심 요소는 아니지만 selectedItemColor: Colors.amber[800]의 의미가 궁금하실 분들은 https://www.materialpalette.com/colors 에서 Material 디자인의 색상 정보를 확인할 수 있습니다. 숫자가 커질수록 색상이 어두워집니다.