Gorouter에서 BottomNavigationBar 사용하기

BottomNavigaionBar는 어떤 앱이든 많이 사용하는 화면 전환방식 중 하나입니다. MUOZ 프로젝트에서도 사용하고 있습니다.

 

1. 모든 페이지에 BottomNavigationBar 적용하기

첫번째로 사용한 방식이 NavgationBar가 있어야하는 모든 페이지에 BottomNavigationBar를 띄우는 방식을 사용했습니다. 일단은 구현해놓고 기능적을 완성하고 나서 수정하기로 했습니다.

문제 발생

큰 오류가 발생하고 수정하는 과정에서 수정하지 못하고 있었습니다. 그래서 화면에서 나오는 문제가 있었습니다. 네비게이션으로 화면 전환는 정상적으로 작동하지만 화면이 전활될때 BottomNavigationBar도 같이 새롭게 보여지고 있었습니다.

 

 

2. shellroute 사용하기

navigation을 GoRouter 라이브러리를 사용하고 있습니다. 이전에는 Navigation을 이용해서 tab 전환을 구현하고 BottomNavigationbar를 구현했었습니다. 하지만 GoRouter를 이용하는 상황에서는 이용할 수 없는 방법이였습니다. 그래서 검색을 해보았습니다. 

ShellRoute, StatefulShellRoute를 사용하는 방법이 있었습니다. 우선 ShellRoute는 같은데 Stateful이 있고 없고의 차이가 무엇인지 알아봤습니다. 하위 위젯의 상태를 유지하냐 하지 않냐의 차이였습니다. 그렇다면 MUOZ에는 무엇이 필요한가. 일단은 화면에 전활될때 유지되어야하는건 노래 재생에 관련된 것인데 이미 화면 전환에도 잘 작동되고 있고, 그래서 BottomNavigationBar를 이용하는데 있어서는  shellRoute를 이용하기로 했습니다.

적용

사용방법은 간단했습니다.

우선은 goRouter의 수정을 해주었습니다.

ShellRoute를 이용한 모습

BottomNavigation을 이용하는 페이지들을 shellRoute로 감싸고 bottomNavigation을 지정해주었습니다. 그리고 화면을 확인해보았습니다. 기존의 화면들에 모두 BottomNavigationBar가 포함되어있어서 BottomNavigationBar가 중복되서 보여지고 있었습니다. 그래서 각 화면에 포함된 각각의 BottomNavigationBar를 제거했습니다. 그리고 확인해보니 정상적으로 작동하는 것이 확인 되었습니다.

 

간단하게 GoRouter를 사용하는 환경에서 ShellRoute를 사용해서 BottomNavigationBar를 구현해서 BottomNavigationBar가 화면에 고정되고 상단 UI만 바뀌도록 수정해보았습니다.

 

GoRouter 라이브러리를 이용해서 간단한 화면 전환에만 사용했었는데 shellRoute와 같이 여러가지 기능이 있다는 것을 처음 알게 되었습니다. 그리고 간단하게 수정할 수 있어서 좋았고 더 다양한 기능을 사용해서 더 좋은 앱을 개발하고 StatefulShellRoute를 사용해서 검색화면의 기록이 유지 될 수 있도록 해봐야겠습니다.