플러터(Flutter) 하단 네비게이션바(BottomNavigationBar) 설정방법

플러터(Flutter), 하단네비게이션바,BottomNavigationBar

앱 하단 부분에 버튼을 추가해 보자!

요즘 플러터를 배우고 있는데 생각보다 재미있습니다. 물론 기존 계속 봤던 언어가 아니다 보니깐 사용을 할 때 아직까지 익숙하지 않고 어렵다 보니 조금 힘들긴 하지만 언제나 새로운 기술을 배우고 새로운 것을 접한다는 것은 정말 좋습니다 그렇게 플러터를 사용하여 앱을 만들다 하단 부분 버튼을 추가하는 방법을 찾다가 내비게이션 바라는 것을 찾게 되었습니다. 해당 버튼을 사용하는 방법에 대해서 알아보도록 하겠습니다.

목차

BottomNavigationBar

ⓒ 네이버 앱 하단 부분 버튼

우리가 흔히 앱을 사용하다 보면 맨 하단에 고정된 버튼들이 보입니다, 이런 버튼들을 보통 네비게이션바라고 표현을 하기도 합니다.

SourceCode:

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,
      ),
    );

위와 같이 적용할 화면 하단 부분에 붙여 넣기를 하여 추가를 하면 Home, Business, School이라는 버튼이 추가되는 것을 볼 수 있습니다. 이렇게 추가를 하게 되면 제대로 사용을 할 수 없습니다. 조금 더 수정해도록 하겠습니다.

SourceCode:

int _selectedIndex = 0;

SourceCode:

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

상단에 우선 선택된 Tab의 index를 저장을 할 수 있는 변수를 만듭니다, 기본적으로 0 그러니깐 첫 번째인 부분을 선택할 수 있도록 0으로 하고 아이템이 클릭할 때마다 변수를 저장할 수 있도록 _onItemTapped라고 만들어줍니다.

SourceCode:

currentIndex: _selectedIndex,
selectedItemColor: Colors.purple,
unselectedItemColor: Colors.grey,

currentIndex의 경우 현재 Tab을 보고 있는 것을 넣는 부분이며, selectedItemColor의 경우 선택된 경우 어떻게 색을 넣을지 정하는 것입니다. unselectedItemColor는 선택한 경우 어떻게 색상을 정하는지 할 수 있습니다.

SourceCode:

onTap: (int index) {
	case 0 :
    
    case 1 :
}

이제 제일 중요한 각 버튼을 클릭하면 어떤 것을 하게 될지 설정을 해야 하는 부분이죠? 저의 경우 OnTap을 활용하여 각 아이템을 클릭할 때마다 어떤 이벤트가 실행이 될지를 설정을 하게 되었습니다. ShowDialog를 통해 설정을 할 수 있는 것도 가능합니다.

Flutter 공식문서[#]를 보면 BottomNavigation Class를 활용을 할 수 있습니다.