[Flutter] (Project) MapleApp: 3. BottomAppBar 개발

🐇 BottomAppBar

기존에 TabBar나 BottomNavigationBar 대신 자유도가 높은 BottomAppBar를 사용하였다. BottomAppBar의 주요 속성은 다음과 같다

 

🍒 elevation

상위 앱 바를 기준으로 이 하단 앱 바를 배치할 z 좌표입니다. 하단 앱 바 아래 그림자의 크기를 제어합니다.

BottomAppBar의 child로 Row를 활용해 Tab을 직접 구현하였다.

 

여기서 주목해야 할 점은, GoRouter와 StaticConfigData를 활용하여 선택한 탭에 대해 사용자에게 가시적으로 보여줄 수 있는 UI를 만드는 것이다. 주요 구현은 다음과 같이 하였다.

static final List mainBottomNavigationTab = [
    {
      'path': '/character',
      'name': 'character',
      'text': '캐릭터',
      'icon': Icons.person,
    },
];

GoRoute(
  path: '/',
  name: 'home',
  pageBuilder: (context, state) =>
      const NoTransitionPage(child: MainHome()),
),

var equal = GoRouterState.of(context).name == tab['name'];

하지만 BottomAppBar는 The overflowing RenderFlex has an orientation of Axis.horizontal. Error를 표출한다. 그 이유는 BottomAppBar의 padding 값이 잡혀있기 때문이다.

BottomAppBar를 사용할 때는 padding: EdgeInsets.zero를 설정해주는 것을 잊지 말자.

 

이렇게 BottomNavigationBar를 구현했고, 기능 테스트는 다음과 같이 진행했다.

🍒 Navigation 작동 (완료)

🍒 Navigation 색상 변경 (완료)

🍒 페이지 이동 확인 (완료)