[Flutter] (Proejct) MapleApp: 2. GoRouter

🐇 GoRouter

다음의 Router의 기본 설정을 잊지 말자. GoRouter를 학습했음에도 불구하고, 실전에서 직접 사용할 땐 놓치는 부분이 많았다.

 

🍒 GoRouter가 설치되어 있는가

🍒 ProviderScope를 적용 시켰는가

🍒 MaterialApp에 router를 적용 시켰는가

 

현재 Router의 위치와 Route의 정보를 담고 있는 Widget의 값과 비교하면 보다 많은 활동을 할 수 있다. 예를 들면, Navigation가지고 있는 Route정보가 이 현재 Router의 정보를 비교하여 어떤 Navigation이 선택됐는지 알 수 있다.

그러기 위해서 Router를 구현하고, StaticConfig에 Router와 매칭되는 TabList를 생성해주면 좋다. TabList에는 Navigation에 필요한 정보를 추가적으로 담는다면, map으로 Widget을 만들어낼 때 퍼포먼스를 향상 시킬 수 있다. 간단하게 코드로 나타내면 다음과 같다.

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

List mainBottomNavigationTab = [
  {
    'path': '/',
    'name': 'home',
    'text': '홈',
    'icon': Icons.home,
  },
];

GoRouterState.of(context).name == tab['name'] ? true : false;

위 소스 코드는 Route와 Route의 정보를 가진 Tab을 비교한다. 마지막 줄의 bool값을 사용하여 색상을 반전 시키거나, 인터렉티브 함수를 컨트롤할 수 있다.