🏎️ Go Router 사용해 보기

go_router | Flutter Package

화면 이동을 위한 방법 정리 (Router)

이번 글에서는 Flutter에서 라우팅을 관리해주는 패키지인 go_router에 대해서 살펴보려고 한다.

Flutter 에서 화면 전환을 처리할 때에 기본적으로 제공하는 Navigator가 있다. Navigator는 사용 방법도 복잡하고, 심플한 라우팅 체계에 사용하기에는 불편한 점이 다소 있다.

저는 주로 Get Router를 사용해 왔는데, 처음에는 context 없이 처리가 가능하다는 부분 때문에 장점이라 생각했지만, Get 패키지 자체가 규모가 큰 패키지에 속하는 편이면서, 라우터 만을 위해 Get을 등록한다는 것이 부담이 되기 시작하고, 개인적으로 Get 패키지에 대해서는 긍정적이지 않은 편이라 새로운 라우터를 찾게 되었다.

라우터를 제공하는 패키지는 이미 다수의 패키지가 있었는데, 여러 라우터들을 사용해 보다가 개인적으로 go_router의 처리 방식이 마음에 들었고, 기존 프로젝트들을 리펙하기에도 부담이 없어 go_router를 자주 사용하고 있는 편이다.

라우터를 선택하는 것은 프로젝트의 특성마다 다르고, 개인의 개발 스타일이나 라우팅 처리 방식에 대한 견해가 다르기에 go_router는 이렇게 사용하는 구나 정도로만 봐주시면 될 것 같다.

Go Router

본격적으로 go_router에 대해서 살펴보도록 하자.

Dependencies

go_router 패키지를 추가해주자. 작성 시점 기준 최신 버전인 13.1.0 버전을 사용했다.

flutter pub add go_router

dependencies:
	go_router: ^13.1.0

MaterialApp.router

먼저 Router 사용을 위해 MaterialApp을 MaterialApp.router로 변경을 해주도록 하자.

라우터를 등록하고 사용하기 위해 .router 메소드를 사용하는 것이다.

@override
Widget build(BuildContext context) {
	return MaterialApp.router();
}

MaterialApp.router도 기존과 동일한 MaterialApp들을 사용할 수 있다. 차이점이 있다면 MaterialApp은 간편하게 home을 지정하여 하위 위젯을 시작점으로 지정할 수 있는 반면 .router에는 home 옵션 파라미터가 없다.

필수로 routerConfig를 등록하여 사용해야 한다.

MaterialApp.router(
	routerConfig : null
);

RouterConfig

RouterConfig를 생성해 줄 것인데, 해당 클래스는 호출될 일이 없어서 클래스 명은 자유롭게 작성하셔도 된다.

static 메소드를 사용한 전역 메소드로 만들어 주자.

import 'package:go_router/go_router.dart';

class CustomRouter {
  static GoRouter router = GoRouter(routes: routes);
}

GoRouter 객체는 필수 값으로 routes 값을 전달하라고 한다.

routes는 RouteBase 타입을 배열로 전달 받고 있다. HomePage라는 기본 페이지를 생성해 주고, Router에 등록을 해주자.

RouteBase 타입은 GoRoute를 넣어주면 되는데, 필수 값으로 path를 지정하도록 되어있다.

하지만, path만 등록해서는 사용이 되지 않고, 에러가 발생할 것이다. 그 이유는 당연하게도 위젯에 대한 정의를 해주지 않았기 때문이다.

원하는 라우터의 페이지를 등록해 주는 방법이 builder, pageBuilder 이렇게 있는데, 이 둘의 차이는 아래에서 추가적으로 설명할 예정이고, 우선은 builder를 사용해서 코드를 추가해 주도록 하겠다.

routes: [
	GoRoute(
		path: "/",
        builder: (_, __) => const HomePage(),
      ),
],

이제 MaterialApp으로 돌아와서 생성한 RouterConfig도 등록해 주고 빌드를 해보자. 정상적으로 HomePage로 이동된 것을 확인할 수 있다.

return MaterialApp.router(
	routerConfig: CustomRouter.router,
);

일반적으로 Navigator를 사용할 때에도 home을 지정해주거나 initialRoute 를 지정하도록 되어있는데, 아무 것도 지정하지 않은 상태에서 GoRouter는 기본 페이지로 HomePage를 사용하고 있을까 ?

이 부분에 대해서 알아보려면 GoRouter의 초기화 라우터를 설정하는 부분의 설명을 봐야한다.

GoRouter에는 옵션 파라미터로 initialLocation을 정의할 수 있게 되어 있는데, 파라미터에 대한 설명을 살펴보면 기본 로케이션이 NULL일 경우 기본 로케이션은 등록된 routes의 "/" path를 사용한다고 되어있다.

그렇다면 HomePage의 path를 "/home" 으로 변경하고 다시 실행을 해보자.

페이지를 찾지 못한다는 에러 페이지가 노출이 되었다.

---

---

initialLocation

위에서 테스트 해본 것 처럼 initialLocation으로 "/" path를 사용할 것이라면, 지정해 주지 않아도 되긴 하지만 "/home" path 처럼 원하는 path 경로를 넣어주고 싶다면, 값을 지정해 주면 된다.

static GoRouter router = GoRouter(
	initialLocation: "/home",
	routes: [
    ...
    ],
);

GoRoute

GoRoute에 대해서 기본적인 사항을 추가적으로 살펴보도록 하자.

이번에는 새로운 페이지를 추가해주도록 하겠다. FirstPage를 생성해 주고, path는 "/first" 라고 해주었다.

GoRoute(
	path: "/first",
	builder: (_, __) => const FirstPage(),
),

이제 HomePage에 간단한 버튼을 만들어서 FirstPage로 라우팅을 해주도록 하자.

go_router에서 라우팅을 하는 방법은 Navigator나 타 패키지 처럼 다양한 방식을 제공하고 있는데, 이 부분은 아래에서 자세히 다룰 예정이니 우선 기본 방식으로 라우팅을 진행해 보자.

context를 사용해 go를 호출해주면 되는데, 이 때에 등록한 path를 넣어주면 된다. 라우팅이 정상적으로 처리되는 것을 확인할 수 있다.

context.go("/first");

이번에는 named로 라우팅을 하는 다른 방식으로도 라우팅을 해주도록 하자. 보기에는 context.go와 차이가 없어 보이지만 어떤 차이점이 있는지 테스트를 해보자.

context.goNamed("/first");

해당 방식으로는 라우팅 처리에 실패하고 아래와 같은 에러가 발생하였다.

해당 에러는 route name으로 "/first"가 등록되지 않았다는 것이다. name을 등록해주도록 하자.

GoRoute(
	path: "/first",
    name: "first",
	builder: (_, __) => const FirstPage(),

이번에는 정상적으로 라우팅에 성공하였다.

GoRouter.of(context).goNamed("first");

이처럼 path를 사용하여 라우팅을 처리할 수도 있고, name을 지정하여 사용할 수도 있다.

path, name 어떤 걸 사용해야 하는 걸까 ? 아래에서 자세한 내용을 살펴보면 쉽게 이해가 될 것인다. path에는 파라미터를 추가해서 동적인 값을 받아올 수 있는 반면, name은 파라미터를 추가로 경로에 넣을 수 없다.

인스타 앱을 개발해서 피드를 공유할 수 있다고 해보자.

이때에 공유되는 피드의 path를 "/feed/{feedNo}" 이렇게 생성한다고 하면 feedNo에는 동적인 값들이 전달될 수 있는 반면, name은 path 처럼 생성할 수가 없다.

name은 명명된 체계를 사용하게 되는데, 현재 페이지가 어떤 페이지인지 라우터를 확인하고 싶을 때, path만 사용하게 되면 라우터를 확인하기 위해 path 값의 contains를 사용해 경로를 확인하거나, 무언가 다른 방법을 사용해서 라우터를 확인해야 할 것이다. 반면 name을 "feed" 라고 지정하게 되면 비교를 쉽게 할 수 있게 된다.

더 자세한 내용은 계속해서 사용해 보면서 추가적인 설명을 하도록 하겠다.

추가로 GoRouter.of(context)를 사용해서 라우팅을 할 수도 있다.

GoRouter.of(context).go(location);

builder VS pageBuilder

GoRoute에서 페이지를 정의할 때에 사용하는 방식인 builder와 pageBuilder에 대해서 비교해 보면서 알아보도록 하자.

builder, pageBuilder는 모두 동일하게 라우팅을 지정할 때에 사용하는 기능이다.

builder

builder는 간단하게 페이지를 전달해주면 된다. 심플하게 Router를 지정할 수 있지만, 라우팅에 대한 Transition은 처리할 수 없다.

파라미터로 BuildContext, GoRouterState를 사용할 수 있는데, GoRouterState에 대해서는 아래에서 해당 기능에 대해서 살펴볼 때에 자세히 다루도록 하겠다.

이미 Flutter를 사용해서 앱을 개발 하셨거나, 네이티브로 앱 개발을 진행해 보신 분들은 페이지가 라우팅될 때에 페이지가 오픈되는 방식을 변경할 수 있다는 것을 이미 알고 있을 것이다.
이러한 기능을 Flutter에서는 PageTransition으로 처리할 수 있는데, builder를 사용한다면 별도로 지정할 수 없고, 플랫폼에 맞게 동작하게 된다.

GoRoute(
	path: "/first",
	builder: (BuildContext context, GoRouterState state) => const FirstPage(),
),

pageBuilder

pageBuilder는 builder 처럼 단순히 위젯을 전달하는 것이 아닌 MaterialPage 또는 CupertinoPage를 전달해서 사용할 수 있는데, 이 때에 PageTransition을 만들어 줄 수 있다.

GoRoute(
	path: "/first",
	pageBuilder: (BuildContext context, GoRouterState state) => 
    			const MaterialPage(child: FirstPage()),
),

Transition

Transition은 위에서 설명한 것처럼 페이지가 작동하는 애니메이션이라 이해하면 쉽다.

Android, iOS 플랫폼은 별도의 디자인 UI 시스템이 있다.
각각 Material Design, Cupertino Design 이라고 한다.

디자인 UI 시스템에 따라 버튼, 앱바, 다이얼로그 등의 디자인이 각각 다르게 작동하는 것을 알 수 있는데, 페이지의 애니메이션도 다르다.

Material 디자인은 페이지를 라우팅 할 때에 작은 화면이 커지면서 전체 화면으로 라우팅되는 애니메이션을 사용하고, iOS는 오래전부터 우측에서 좌측으로 이동하는 애니메이션을 사용하고 있다.
Android는 과거에 아래에서 위로 올라오는 애니메이션을 사용한 적도 있다.

iOS	Android

Flutter는 대부분의 프로젝트를 MaterialApp으로 빌드를 하는게 일반적인데, Material을 사용 하더라도 별도로 지정하지 않으면 PageTransition은 각 플랫폼의 기본 Transition을 적용하고 있다.

플랫폼 Transition을 그냥 사용하게 된다면, 위에서 살펴본 builder를 사용해서 심플하게 라우팅을 선언해주면 되지만 원하는 Transition을 만들고 싶다면
pageBuilder를 사용하면 된다.

PageTransition에는 어떤 작동 방식들이 있는지 살펴보자.

NoTransition
SlideTransition
FadeTransition
ScaleTransition

No	Slide

Fade	Scale

PageTransition을 커스텀하게 만들어 주는 방식은 위의 4가지 방법으로 애니메이션을 만들어 줄 수 있다.

NoTransitionPage

NoTransition은 애니메이션 처리를 하지 않는 방법이다. Page가 라우팅 될 때에 애니메이션 처리를 하지 않고 싶은 경우가 있다. 로그인 페이지로 라우팅을 하거나 BottomNavigationBar를 사용하는 경우에 해당 Transition을 사용할 수 있다.

GoRoute(
	path: "/no",
	pageBuilder: (BuildContext context, GoRouterState state) =>
            const NoTransitionPage(child: NoPage()),
	),

CustomTransitionPage

Fade, Scale, Slide와 같은 Transition을 만들고 싶을 때, CustomTransition을 사용해서 만들어 줄 수 있다.

CustomTranstionPage를 사용하면, transitionsBuilder를 생성할 수 있는데, 여기에서 Transtion을 사용한 애니메이션 처리를 커스텀하게 구성해주면 된다.

FadeTransition

GoRoute(
	path: "/fade",
	pageBuilder: (BuildContext context, GoRouterState state) => CustomTransitionPage(
          child: const FadePage(),
          transitionsBuilder: (
            BuildContext context,
            Animation<double> animation,
            Animation<double> secondaryAnimation,
            Widget child,
          ) => FadeTransition(
            opacity: animation,
            child: child,
          ),
        ),
      ),

ScaleTransition

GoRoute(
	path: "/scale",
	pageBuilder: (BuildContext context, GoRouterState state) =>
            CustomTransitionPage(
          child: const ScalePage(),
          transitionsBuilder: (
            BuildContext context,
            Animation<double> animation,
            Animation<double> secondaryAnimation,
            Widget child,
          ) => ScaleTransition(
            scale: animation,
            child: child,
          ),
        ),
      ),

SlideTranstion

GoRoute(
	path: "/slide",
	pageBuilder: (BuildContext context, GoRouterState state) =>
            CustomTransitionPage(
                child: const SlidePage(),
                transitionsBuilder: (
                  BuildContext context,
                  Animation<double> animation,
                  Animation<double> secondaryAnimation,
                  Widget child,
                ) => SlideTransition(
                      position: animation.drive(
                        Tween<Offset>(
                          begin: const Offset(1.25, 0),
                          end: Offset.zero,
                        ).chain(CurveTween(curve: Curves.easeIn)),
                      ),
                      child: child,
                    )),
      ),

CustomTransitionPage로 원하는 Transition을 만들 수 있지만, Transtion을 사용하게 되면 iOS에서 뒤로가기에 사용하는 Gesture는 비활성화 처리되니 이 부분을 고려해서 사용하면 된다.

builder, pageBuilder 함께 사용시

만약에 builder와 pageBuilder를 모두 사용하게 되면 어떻게 될까 ?

builder, pageBuilder를 사용하지 않으면, 에러가 발생하지만 둘 다 사용하는 경우에는 에러가 발생하지는 않고, pageBuilder를 우선으로 처리하게 된다.

Go Vs Push

Go

라우팅을 하는 명령어에 대해서는 아직 자세히 다루지 않았었다.

가장 기본적으로 라우팅을 하는 방법이 go, push 이렇게 있는데, 기능들의 차이점을 알고 있어야 한다.

go, push 모두 페이지를 새로 오픈하는 개념은 동일한데, 라우팅 스택에는 완전히 다른 차이를 보인다.

먼저 go 방식에 대해서 살펴보자. 간단하게 go를 사용하면 되고, 필수 값으로 location, 즉 path를 넣어주면 된다.

context.go("/first");

이벤트를 호출하면 새로운 페이지가 오픈되고, 페이지를 닫아보도록 하자.

어떤일이 일어날까 ? 닫히지 않을 것이다. context.pop()을 사용하면 에러가 발생한다.

새로 오픈한 페이지를 왜 닫을 수 없을까 ? 이유는 바로, 더 이상 닫을 페이지가 없기 때문이다.

go 라우팅 방식은 페이지를 새로운 페이지로 대체하여 라우팅을 처리하는 개념이다.

예를 들어, 기본 경로를 시작으로, 첫 번째 페이지를 열어주고, go를 사용해 두 번째 페이지를 오픈한다고 해보자.

이렇게 되면 라우터 스택에는 순차적으로 "/", "/first", "/second" 이렇게 스택이 처리 되어야 하는데, go로 "/second"를 오픈하는 순간 "/", "first" 스택을 대체하고 "/second" 스택만 남기게 된다.

라우터 스택에 쌓인 모든 스택을 제거하고 새로운 페이지를 오픈할 때에 사용하는 기능이 바로 go 이다.

이 기능을 테스트하는 가장 쉬운 방법은 go로 오픈하기 전 라우트 스택에 dispose 기능을 사용하여 이벤트가 작동하는지를 출력해 보면서 확인하는 것이다.

@override
void dispose() {
	super.dispose();
	print("FirstPage Dispose");
}

Push

이번에는 push에 대해서 살펴보자.

push 우리가 일반적으로 사용하는 라우터스택에 라우터를 추가하면서 이동하는 방식이다.

context.push("/first);

아래 기능과 동일한 기능이다.

Navigator.of(context).push(route);

goNamed

위에서 살펴본 go는 location으로 설정한 path 값을 넣어야 하지만, named를 사용하고 싶다면 goNamed를 사용하면 된다.

context.go("first");

pushNamed

이번엔 push의 named 방법이다.

context.pushNamed("first");

pushReplacement

이번엔 Replacement를 사용하는 방법을 살펴보자. 우선 모든 라우트 스택을 대체하는 go는 당연히 Replacement 개념이 없고, push에만 해당 기능이 있다.

Replacement는 대체하여 이동하는 개념인데, 얼핏보면 go와 동일해 보이지만 Replacement는 현재 라우트스택만 새로운 라우터로 대체하는 기능이다.

context.pushReplacement("/second");

Push	PushReplacement

pushReplacementNamed

pushReplacement의 named 방식이다.

context.pushReplacementNamed("/second");

NavigatorObserver

이번에는 go_router 패키지의 편한 디버깅 기능인 Observer에 대해서 살펴보자.

Bloc 패턴을 사용해 보신 분들은 Bloc이 가지는 ObserverPattern에 대해서 좋은 기능이라는 것을 알고 있을 것이다.

go_router에서도 동일한 Observer를 수신할 수 있도록 해준다.

먼저 Observer를 구성해 주도록 하자.

NavigatorObserver를 상속받아 사용할 수 있고, didPush, didPop, didRemove, didReplace를 재정의 하여 원하는 이벤트를 넣을 수도 있고 디버깅 로그를 출력해 볼 수도 있다.

class RouterObserver extends NavigatorObserver {
  @override
  void didPush(Route<dynamic> route, Route<dynamic>? previousRoute) {
    print("DidPush: $route");
  }

  @override
  void didPop(Route<dynamic> route, Route<dynamic>? previousRoute) {
    print("DidPop: $route");
  }

  @override
  void didRemove(Route<dynamic> route, Route<dynamic>? previousRoute) {
    print("DidRemove: $route");
  }

  @override
  void didReplace({Route<dynamic>? newRoute, Route<dynamic>? oldRoute}) {
    print("DidReplace: $newRoute");
  }
}

RouterObserver 객체를 GoRouter의 observers 파라미터에 추가해주면 된다.

observers 파라미터는 배열로 받을 수 있어 여러 개의 NavigatorObserver를 구성할 수도 있다.

static GoRouter router = GoRouter(
    initialLocation: "/",
    observers: [RouterObserver()],
    routes: [
		...
   ],
);

이제 Observer를 추가하였으니, 위에서 살펴본 go 기능과 push 기능의 차이를 더 쉽게 로그로 출력해 볼 수 있을 것이다.

Object

이어서 라우터 기능의 중요한 기능인 데이터를 전달하는 방법에 대해서 살펴보도록 하겠다.

Flutter는 위젯간 Constructor라는 생성자를 통해 데이터를 전달할 수 있고, 당연히 go_router에서도 데이터 전달이 가능하다.

Person이라는 페이지로 name, age, email을 넘겨주도록 하자.

먼저 Person 페이지를 생성하고 생성자를 추가해 주도록 하자.

class PersonPage extends StatelessWidget {
  final String name;
  final int age;
  final String email;
  const PersonPage({
    super.key,
    required this.name,
    required this.age,
    required this.email,
  });
  
  ...
}

이제 GoRoute를 정의해주면 되는데, go_router 패키지는 데이터를 GoRouterState 객체를 사용해 전달 받을 수 있다.

GoRouteState 객체의 extra는 Object? 타입을 전달 받아 사용하기에 아래와 같이 파라미터를 전달하여 라우트를 정의해주면 된다.

GoRoute(
	path: "/person",
	name: "person",
	builder: (BuildContext context, GoRouterState state) {
		return PersonPage(
              name: (state.extra as Map<String, dynamic>)["name"],
              age: (state.extra as Map<String, dynamic>)["age"],
              email: (state.extra as Map<String, dynamic>)["email"],
            );
	}
),

이제 라우터를 호출할 때에 extra에 데이터를 넣어주면 된다. 간단하게 데이터를 넘기는 방법에 대해서 살펴봤다.

context.push("/person",
	extra: {
		"name": name,
		"age": age,
		"email": email,
});

Map 타입이 아닌 Object를 사용하는게 일반적이기 때문에, Person 객체를 생성해 주도록 하겠다.

class Person {
  final String name;
  final int age;
  final String email;

  const Person({
    required this.name,
    required this.age,
    required this.email,
  });
}

extra를 Person 객체로 타입 캐스트해서 사용할 수 있다.

GoRoute(
	path: "/person",
	name: "person",
	builder: (BuildContext context, GoRouterState state) {
            return PersonPage(
              person: state.extra as Person,
            );
	}
),

Path Parameter

이번엔 path에 파라미터를 추가하여 데이터를 전달해 주도록 하자.

path에 파라미터를 추가하는 이유는 동적인 데이터를 경로로 사용하고 싶은 경우에 주로 사용하는 방법이다.

만약에 SNS 서비스를 개발한다고 가정하자.

사용자가 생성한 피드를 페이지에 접근할 때에 해당 피드의 고유한 피드 번호를 알고 있어야 데이터 조회가 가능할 것이다. 피드 번호를 path 경로에 추가하여 데이터를 전달 받고 싶을 때에 사용되며, 웹에서 사용하는 방식과 동일하다고 생각하면 된다.

FeedPage를 생성하고 해당 피드의 번호만 받아올 수 있도록 라우터를 정의해 주도록 하겠다.

path를 생성시 /:feedNo라고 해준다면 / 다음에 오는 값을 GoRouterState의 pathParameters 정보에 담겨져 제공된다.

해당 경로에 오는 값은 정의해준 feedNo로 얻을 수 있게 된다.

GoRoute(
	path: "/feed/:feedNo",
	builder: (BuildContext context, GoRouterState state) => 
    	FeedPage(feedNo: int.parse(state.pathParameters["feedNo"]!),
	),
),

당연히 여러 개의 경로를 추가할 수 있다. 이번엔 사용자의 고유 ID 값도 받아올 수 있게 해보자.

이런 방법으로 원하는 path 경로에서 동적 데이터를 전달 받을 수 있게 된다.

GoRoute(
	path: "/feed/:feedNo/:uid",
	builder: (BuildContext context, GoRouterState state) => 
    	FeedPage(
        	feedNo: int.parse(state.pathParameters["feedNo"]!
            uid: state.pathParameters["uid"]!,
      	),
	),
),

생성한 path 경로에 데이터가 전달 되지 않는 경우에는 에러가 발생하게 되니, 반드시 필수로 넣어주어야 한다.

Query Parameter

이번에는 Query Parameter에 대해서 살펴보자.

위에서 살펴본 Path Parameter는 반드시 필수적으로 path에 값을 넣어주어야 하는 반면, Query Parameter로 정의된 값은 옵셔널하게 처리할 수 있다.

검색 페이지를 생성하고 Optional Parameter로 keyword를 받아올 수 있도록 해보자.

keyword는 Nullable 타입으로 전달 받으면 되고, GoRouterState의 uri 정보에 담긴 queryParameters를 사용해 keyword를 가져올 수 있다.

GoRoute(
	name: "search",
	path: "/search",
	builder: (BuildContext context, GoRouterState state) => SearchPage(
	keyword: state.uri.queryParameters["keyword"],
	)
),

Query Parameter를 라우팅하는 방법은 여러가지 방법이 있다. 먼저 named를 사용하는 방법이다.

pushNamed 또는 goNamed에는 파라미터로 queryParameters를 제공하는데, 여기에 keyword를 전달해 주면 된다.

context.pushNamed("search", queryParameters: {
	"keyword": "검색어",
});

이번에는 named가 아닌 path를 그대로 사용하는 방법이다. path 경로에 옵셔널 파라미터를 추가하는 방법인 ? annotation을 사용해 주면 된다.

context.push("/search?keyword=검색어");

Callback

새로운 페이지를 라우팅할 때에 데이터를 전달하는 방법에 대해서 살펴봤으니, 이번엔 반대로 페이지를 닫을 때 부모 위젯에 데이터를 전달하는 방법에 대해서 살펴보자.

pop() 이벤트에 결과 값을 전달하는 방법은 이미 기존 라우팅 방식에도 가능한 기능들이다. go_router에서 어떻게 처리하는지 알아보도록 하겠다.

pop() 이벤트 안에 전달하고 싶은 데이터를 넣어주면 된다.

context.pop(true);

라우팅 이벤트를 실행하는 부분에서 콜백에 대해 수신을 하면 데이터를 전달 받을 수 있다.

context.push("/test").then((value) {
	print(value);
});

// flutter: true

Map 타입을 전달할 수도 있다.

context.pop({
	"name": "Tyger",
	"age": 100,
	"email": "boglbbogl@gmail.com",
});

context.push("/test").then((value) {
	print(value);
});

// flutter: {name: Tyger, age: 100, email: boglbbogl@gmail.com}

Object를 생성해서 사용해 보도록 하자.

class Person {
  final String name;
  final int age;
  final String email;
  final DateTime birthday;

  const Person({
    required this.name,
    required this.age,
    required this.email,
    required this.birthday,
  });
}

객체를 전달할 수 있다.

Person person = Person(
	name: "Tyger",
	age: 100,
	email: "boglbbogl@gmail.com",
	birthday: DateTime(2000, 01, 01),
);
context.pop(person);

context.push("/test").then((value) {
	print(value);
});

// flutter: Person(name: Tyger, age: 100, email: boglbbogl@gmail.com, birthday: 2000-01-01 00:00:00.000)

변수, Map, Object 외에도 배열을 콜백으로 전달할 수도 있다. 추가로 pushReplacement는 라우팅을 요청한 페이지의 스택이 사라져서 데이터를 전달 받을 수 없으니, 콜백에 대한 라우트 스택을 잘 고려해서 설게를 해야 한다.

Redirect

이번에는 Redirect 라우팅에 대해서 살펴보도록 하자.

GoRouter는 등록된 라우터를 동작시킬 때에 원하는 조건에 따라 리다이렉트를 설정할 수 있도록 되어있다.

Redirect 기능을 사용하지 않고도 이러한 기능은 충분히 개발할 수 있지만, Redirect를 사용해 보면, 라우터 등록 및 유지 관리를 좀 더 수월하게 할 수 있게 된다.

Redirect 사용 방법은 간단하다. Redirect하고 싶은 path를 등록해 주기만 하면 된다.

FirstPage, RedirectPage를 라우터에 등록하도록 하자.

GoRoute(
	path: "/first",
	builder: (BuildContext context, GoRouterState state) =>  const FirstPage(),
),
GoRoute(
	path: "/redirect",
	builder: (BuildContext context, GoRouterState state) =>  const RedirctPage(),
),

FirstPage 라우터에 redirect 파라미터를 사용해 보도록 하자.

간단하게 path만 등록해주면 된다.

GoRoute(
	path: "/first",
	builder: (BuildContext context, GoRouterState state) =>  const FirstPage(),
    redirect: (BuildContext context, GoRouterState state) {
          return "/redirect";
        },
),

이제 push를 해주게 되면, FirstPage로 라우팅이 되지 않고, Redirect 페이지로 라우팅이 된 것을 확인할 수 있다.

context.push("/first");

redirect 파라미터로 등록된 경로를 라우팅하게 된다.

이번에는 조건을 추가하여 Redirect 라우팅을 진행해 보도록 하자.

월을 받아와서 봄이면 SpringPage()로 Redirect 하고, 여름이면 SummerPage()로, 그 외의 경우는 Redirect를 하지 않도록 해보자.

MontlyPage 라우터를 등록해 주고, path로 현재 터치된 월을 받아오도록 하자.

GoRoute(
	path: "/montly/:month",
	builder: (BuildContext context, GoRouterState state) => MontlyPage(
          title: state.pathParameters["month"]!,
        ),
),

Spring, Summer 페이지에 대한 라우터도 등록해 두자.

GoRoute(
	path: "/summer/:content",
	builder: (BuildContext context, GoRouterState state) => SummerPage(
		content: state.pathParameters["content"]!,
)),
GoRoute(
	path: "/spring/:content",
	builder: (BuildContext context, GoRouterState state) => SpringPage(
		content: state.pathParameters["content"]!,
)),

redirect 조건을 MontlyPage에 추가해주자.

redirect: (BuildContext context, GoRouterState state) {
	switch (state.pathParameters["month"]!) {
		case "Mar" || "Apr" || "May":
			return "/spring/${state.pathParameters["month"]}";
		case "Jun" || "Jul" || "Aug":
			return "/summer/${state.pathParameters["month"]}";
		default:
			return null;
          }
        },

Redirect	Redirect X

Multiple Routing

다중 라우팅에 대해서 살펴보자.

다중 라우팅은 하나의 페이지를 라우팅하는 것이 아닌, 서브 스택을 추가하여 지정한 페이지들을 라우팅 할 수 있는 기능이다.

만약에 FirstPage(), SecondPage() 이렇게 두 개의 페이지를 순차적으로 오픈하면서 이동하고 싶다고 가정해 보자.

다중 라우팅을 지원하지 않는 경우라면 아래 처럼 연속으로 라우팅을 진행할 것이다.

context.push("/first");
context.push("/second");

go_router는 다중 라우팅을 지원하기 때문에, 코드를 연속적으로 작성할 필요 없이 path에 경로를 추가하여 페이지들을 라우팅 할 수 있게 된다.

먼저 FirstPage()에 대한 라우트를 등록해주자.

GoRoute(
	path: "/first",
	builder: (BuildContext context, GoRouterState state) =>
            const FirstPage(),
),

SecondPage()에 대한 라우트를 생성할 것인데, 이 때에 SecondPage() 호출시 FirstPage()를 오픈하고 SecondPage()를 열어줄 수 있도록 할 것이다.

GoRoute에는 routes를 배열로 subRoutes를 등록할 수 있다.

다중 페이지를 라우팅하는 것은 push로는 진행할 수 없으며, go를 사용하여야 한다.

위에서 go에 대해서 알아봤을 때에, go는 페이지를 대체하고 이동한다고 하였다.
만일 FirstPage()를 GoRoute로 등록하고 subRoute로 SecondPage()를 등록하게 되면, 앱의 최상위 라우트가 FirstPage()로 대체되기 때문에, 다시 홈으로 돌아오길 원한다면, initialRoute의 subRoute로 등록해야 한다.

GoRoute(
	path: "/",
	builder: (BuildContext context, GoRouterState state) => const HomePage(),
	routes: [
		GoRoute(
            path: "first",
            builder: (BuildContext context, GoRouterState state) =>
                const FirstPage(),
            routes: [
              GoRoute(
                  path: "second",
                  builder: (BuildContext context, GoRouterState state) =>
                      const SecondPage()),
            ],
          ),
        ],
      ),

subRoute를 등록 하였으니, 이제 이벤트를 발생시켜 라우팅을 처리해 주도록 하자.

먼저, subRoute로 등록한 FirstPage(), SecondPage()를 오픈하고 가고 싶다면 go를 사용해 path를 넣어주면 된다.

라우팅된 페이지를 보면 SecondPage()가 보이고, pop()을 하게 되면, FirstPage()가 보이게 된다.

여기서 한번더 pop()을 하게 되면, subRoute의 상위 Route인 "/" 해당 경로로 나오게 된다.

context.go("/first/second");

push를 해주게 되면, Second() 페이지만 오픈된다.

FirstPage()만 오픈하고 싶다면 기존과 동일하게 사용하면 된다.

context.push("/first");

SecondPage()만 오픈하고 싶을 때에는 두 가지 방법 중 하나를 사용하면 된다. 먼저, push를 사용한 방법이다.

context.push("/first/second");

다음은 "/second" 경로를 사용하고 싶을 때, 새로운 Route를 등록해주면 된다.

GoRoute(
	path: "/second",
	builder: (BuildContext context, GoRouterState state) =>
            const SecondPage(),
      ),

context.push("/second");

데이터 전달도 기존 사용 방법과 동일하다.

FirstPage()에서 데이터를 받아올 수 있도록 해주자.

 GoRoute(
	path: "first/:path",
	builder: (BuildContext context, GoRouterState state) => FirstPage(
		path: state.pathParameters["path"]!,
	),
	routes: [
		GoRoute(
			path: "second",
			builder: (BuildContext context, GoRouterState state) =>
                      const SecondPage()),
	],
),

FirstPage -> SecondPage

context.go("/first/go/second");

FirstPage

context.push("first/push");

Error

이어서 Error에 관한 부분을 살펴보자.

Error를 발생하는 가장 쉬운 방법은 등록되지 않은 path로 라우팅을 해보면 된다.

context.push("/error");

라우터가 등록되지 않았기 때문에 에러가 발생한다.

go_router 에서는 기본적으로 에러에 대한 별도의 페이지가 존재한다.

에러도 위에서 살펴본 Redirect 처럼 에러가 발생한 경우 에러 페이지로 리다이렉트 되는 것이다.

errorBuilder, errorPageBuilder 파라미터를 사용해서 에러 페이지를 등록해주면 된다.

errorBuilder를 사용해 에러 페이지를 등록해 주도록 하자.

에러는 GoRouter 파라미터로 등록이 된다.

errorBuilder

static GoRouter router = GoRouter(
    initialLocation: "/",
    errorBuilder: (BuildContext context, GoRouterState state) => ErrorPage(
      path: state.matchedLocation,
    ),
 	...
);

errorPageBuilder

static GoRouter router = GoRouter(
    initialLocation: "/",
    errorPageBuilder: (BuildContext context, GoRouterState state) =>
        NoTransitionPage(child: ErrorPage(path: state.matchedLocation)),
 	...
);

Error에 대한 UI를 자유롭게 생성할 수 있다.

추가로 라우터 builder와는 다르게, error는 builder 또는 pageBuilder 하나의 파라미터만 사용해야 하고, 둘 다 사용하는 경우 에러가 발생한다.

등록하지 않은 경로를 사용하는 것 외에도 path가 잘 못된 경우에도 에러 페이지로 라우팅이 된다.

GoRoute(
	path: "/test/:id",
	builder: (BuildContext context, GoRouterState state) => const TestPage(),
),

id 파라미터가 없으므로 에러가 발생한다.

context.push("/test");

BottomNavigationBar

go_router를 사용해서 BottomNavigationBar를 사용하는 방법에 대해서 살펴보도록 하자.

BottomNavigationBar 기능을 만드는 방법은 정말 다양한 방법들이 존재한다. go_router에서 제공하는 기능도 이들 중 한가지 기능이기 때문에 최적화에 맞는 방법으로 적용해 보시면 될 것 같다.

BottomNavigationBar 사용을 위해서는 shellRoute를 사용해야 한다.

StatefulShellRoute.indexedStack 이 바로 IndexedStack을 사용해서 간편하게 BottomNavigationBar를 만들 수 있도록 제공하는 메소드 이다.

branches 파라미터를 필수로 등록해야 한다.

builder를 사용해 BottomNavigationBar를 만들어 주면 된다.

StatefulShellRoute.indexedStack(
	branches: [],
	builder: (BuildContext context, GoRouterState state,
                StatefulNavigationShell navigationShell) => Scaffold(),
),

BottomNavigationBar를 3개의 탭으로 구성하여 생성하였다.

body 부분은 StatefulNavigationShell 객체를 넣어주면 되고, currentIndex도 StatefulNavigationShell 객체에 현재의 currentIndex 정보가 있다.

StatefulNavigationShell 객체에 BottomNavigationBar를 생성할 때에 필요한 정보를 가지고 있다고 보면 된다.

StatefulShellRoute.indexedStack(
	branches: [],
	builder: (BuildContext context, GoRouterState state,
                StatefulNavigationShell navigationShell) => Scaffold(
          body: navigationShell,
          bottomNavigationBar: BottomNavigationBar(
            items: const <BottomNavigationBarItem>[
              BottomNavigationBarItem(icon: Icon(Icons.home), label: "A"),
              BottomNavigationBarItem(icon: Icon(Icons.settings), label: "B"),
              BottomNavigationBarItem(icon: Icon(Icons.account_circle), label: "C"),
            ],
            currentIndex: navigationShell.currentIndex,
            onTap: (int index) => null,
          ),
        ),,
),

StatefulNavigationShell 객체의 goBranch()를 사용해서 탭을 변경해 줄 수 있다.

onTap: (int index) => navigationShell.goBranch(index),

branches에 BottomNavigationBar 바디에 해당하는 스크린들을 넣어주면 된다.

이 때에 StatefulShellBranch 객체를 사용해서 등록해주면 되고, routes에는 지금까지 살펴본 GoRoute를 사용하면 된다.

subRoutes 등록 역시도 기존의 사용하던 방법과 동일하다.

branches: [
	StatefulShellBranch(
		routes: [
			GoRoute(
				path: "/screenA",
				builder: (context, state) => const AScreen(),
			),
		],
	),
	StatefulShellBranch(
		routes: [
			GoRoute(
				path: "/screenB",
				builder: (context, state) => const BScreen(),
			),
		],
	),
    StatefulShellBranch(
		routes: [
			GoRoute(
				path: "/screenC",
				builder: (context, state) => const CScreen(),
			),
		],
	),
],

앱이 시작되고 initialRoutes가 BottomNavigationBar가 있는 페이지로 하고 싶다면 탭의 바디 부분의 path로 지정해 주면 된다.

initialLocation: "/screenA",

subRoutes를 사용하게 되면, BottomNavigationBar 위에서 라우팅이 되는 것이기 때문에 페이지가 전환 되더라도 BottomNavigationBar가 남아 있으니, 이 부분을 고려해서 사용하시면 된다.

GoRouter

routes: [
      GoRoute(
        path: "/subScreenC",
        builder: (context, state) => const CSubScreen(
          isSub: false,
        ),
      ),
],

StatefulShellRouter

StatefulShellBranch(
	routes: [
		GoRoute(
			path: "/screenC",
			builder: (context, state) => const CScreen(),
				routes: [
					GoRoute(
						path: "subScreenC",
						builder: (context, state) => const CSubScreen(),
				)
	 		])
		],
),

---

마무리

지금까지 go_router를 사용하기 위한 라우터 등록 부터 사용 방법 및 기능에 대해서 살펴보았다.

라우터는 Flutter의 기본 Navigator를 사용해서도 얼마든지 원하는 기능을 개발할 수 있기 때문에 go_router 사용이 필수적인 것은 아니다.

프로젝트에 맞는 라우터를 선택해서 사용하는 것이 중요하다 !

궁금하신 부분이 있거나 추가적으로 go_router에 대해서 알고 싶은 기능이 있다면 댓글 남겨주세요 💬