[Flog Favorite] go_router 패키지

Flutter에는 정말 많은 패키지들이 존재하고, 지금도 누군가는 새로운 기능, 유용한 기능을 만들어 내고 있다.

필자는 항상 패키지의 사용 대신, 직접 구현을 하고자 하려는 편인데, 쉽지않다. 또한 생산성 측면에서도 아주 최악이다. 그럼에도 직접 구현을 하는 것에 여러가지 장점이 있다고 생각하지만, 커뮤니티 내에서 생산되는 수많은 패키지들에 대한 정보들을 아는 것 또한 개인의 업무 역량, 효율적인 시간 투자 등 여러 이점을 제공한다고 생각하여 많은 패키지들을 알아보기로 하였다.

그래서 Flog Favorite 을 또 새로 만들었다.

 

현재 진행하고 있는 프로젝트 내부에는 GetX에서 제공하는 route 기능을 사용하고 있다. 각각 view의 위치 및 기능 등에 맞추어 일련의 규칙에 따라 route 이름을 정하고 해당 식별자를 통하여 페이지 이동을 하고있다.

최근, 몇가지 구조적인 변경으로 인하여 route 이름이 변경되어야 하는 경우가 생겼다. 규칙을 바꾸어야 하는지, 이름을 변경하여 재조정 해야하는지, 또한 규칙의 변경에 따른 전후사정이 어떤식으로 달라져야 하는지, 필요한 것은 무엇인지 등등의 여러 방면의 쟁점이 존재하는데, 이것을 마치 정답처럼 정하기가 참 까다로운 부분인것 같다.

어떤 패키지를 소개해야 할지 탐색하던 중에, 우선적으로 Flutter favorite으로 선정된 패키지들을 보게 되었고, 오전에 있었던 route에 대한 이야기가 생각나 go_router를 소개하기로 결정하였다.

 

먼저 기본적인 route 설정에 대해 알아보려고 한다.

final GoRouter _router = GoRouter(
  routes: <RouteBase>[
    GoRoute(
      path: '/',
      builder: (BuildContext context, GoRouterState state) {
        return const HomeScreen();
      },
      routes: <RouteBase>[
        GoRoute(
          path: 'details',
          builder: (BuildContext context, GoRouterState state) {
            return const DetailsScreen();
          },
        ),
      ],
    ),
  ],
);

pub.dev의 go_router 패키지 example 항목에 있는 일부 코드이다.

_router 내부에 정의되는 routes 는 RouterBase의 List이며 내부에 정의되는 RouteBase들은 또한 내부에 새로운 RouteBase들을 가질 수 있다.

이와같은 중첩된 route 형식은 현재 string을 통하여 정의된 route 구조와 비교하여 수정이나, 구조 변경등에 대응하기 수월해 보인다.

 

final GoRouter _router = GoRouter(
  routes: <RouteBase>[
    GoRoute(
      path: '/',
      builder: (BuildContext context, GoRouterState state) {
        return const HomeScreen();
      },
      routes: <RouteBase>[
        GoRoute(
          path: 'main',
          builder: (BuildContext context, GoRouterState state) {
            return const DetailsScreen();
          },
          routes: <RouteBase>[
          	routerA,
          ],
        ),
        GoRoute(
          path: 'niam',
          builder: (BuildContext context, GoRouterState state) {
            return const NeercSsliated();
          },
          // routes: <RouteBase>[
          //	routerA,
          // ]
        ),
      ],
    ),
  ],
);

final routerA = GoRoute(
	routes: <RouteBase>[
    	GoRoute(
        	path: 'record'
            builder: (_, __) {
            	return RecordPage();
            },
        ),
      ],
    );

해당 예시 코드 처럼 routerA가 main에 붙어있는 경우 RecordPage()에 도달하기 위해 context.go 메서드에 전달해야 할 route parameter는 '/main/record' 가 된다.

만약 main이 아닌 niam에 정의 한 경우는 route parameter를 '/niam/record'로 전달하면 된다.

 

이번에는 GoRouter의 property중 redirect 항목에 대해 알아보자.

 

final GoRouter _router = GoRouter(
  routes: <GoRoute>[
    GoRoute(
      path: '/',
      redirect: (_) => '/page1', // this takes priority over the sub-route.
      routes: <GoRoute>[
        GoRoute(
          path: 'child',
          redirect: (_) => '/page2',
        ),
      ],
    ),
  ],
);

해당 코드는 redirect 항목의 주석에 나와있는 내용이다.

route '/' 로 이동할 경우 '/page1' 항목으로 이동시키고, '/child' 로 이동할 경우 '/page2' 로 이동시킨다.

redirect property는 FutureOr<String>을 반환하는 method를 parameter로 받는데, 해당 method 내부에서 여러 구현을 통해 각 페이지, route별 필요한 로직을 실행 시킬 수 있다.

 

추가 기능은 개인별로 더 알아보자! 글 수정 예정