플러터의 화면이동 go_router

Go_Router 

 

플러터에는 화면이동을 만드는 방법이 여러가지가 있는데

기본적으로 플러터에서도 Navigator 가 있어서 라우팅에 전혀 문제는 없지만

우리는 항상 좀 더 편하게 개발을 하고 싶으니까 go_router 를 써보자.

 

실제로 많은 프로젝트에서도 채택하고 있는 듯하고

• 템플릿 구문(예: "user/:id')을 사용하여 경로 및 쿼리 매개변수 구문 분석
• 목적지에 대한 여러 화면 표시(하위 경로)
• 리다이렉션 지원
• ShellRoute를 통한 여러 Navigator 지원
• Material 및 Cupertino 앱 모두 지원
• Navigator API와의 하위 호환성

같은 기능들도 지원하고 있어서 화면이동을 구현하는데 있어서 부족함이 없다.

 

기본 세팅

 

패키지를 추가해주자.

dependencies:
	go_router: ^14.6.2

 

이 기능을 사용하려면 제일 먼저 

앱의 시작점에 있는 

MaterialApp 을 

@override
Widget build(BuildContext context) {
	return MaterialApp.router(
    	.. 중략
        routerConfig : router
    );
}

 

이런 식으로 바꿔줘야한다. 그리고 routerConfig 를 필수적으로 설정해줘야한다.

여기에 적혀있는 router 는 내가 작성한 라우터 파일인데 이건 아래에 적어두겠다.

생성하지 않았다면 일단 null 로 적어두자.

 

final router = GoRouter(initialLocation: "/", routes: [
  GoRoute(
    path: "/",
    builder: (context, state) => const PromotionApp(),
  ),
  GoRoute(
    path: "/mypromote",
    builder: (context, state) => const MyPromoteView(),
  ),
  GoRoute(
    path: "/promotion",
    builder: (context, state) => const PromoteView(),
  )
]);

 

대강 이런식으로 작성하게 되는데 path 에 있는 경로가 불리면 오른쪽에 선언해둔 화면으로 이동하겠다는 의미다.

실제로 이동을 호출할때는 

@override
Widget build(BuildContext context, WidgetRef ref) {
  final promotionList = ref.watch(publicPromotionListViewModelProvider);

  return Scaffold(
    body: Column(
      children: [
        Row(
          mainAxisAlignment: MainAxisAlignment.end,
          children: [
            IconButton(
              onPressed: () {
                context.go("/mypromote");
              },
              icon: const Icon(
                Icons.person,
                color: Colors.black,
                size: 30.0,
              ),
            )
          ],
        ),

 

이렇게 불러주면 이동이 되는것이다. 아주 편하다.

추가로 initialLocation 는 단어에서 보이는것처럼 라우터가 처음 시작할때 보여줄 화면을 지정할 수 있다.

아래에서 적어준 경로들중 내가 처음 띄우고 싶은 화면의 경로를 적어주면 된다.

 

전환 애니메이션

 

화면을 전환할때 애니메이션을 추가하고 싶을수도 있다.

그때는 

 

GoRoute(
	path: "/move",
	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,
          ),
        ),
      ),

 

CustomTransitionPage 를 이용해서 설정해줄 수 있다. 예시에서는 Fade 만 있는데 이외에도 여러 트랜지션을 제공한다.

필요에 따라서 문서를 찾아 구현해보도록 하자.

 

 

Go 와 Push 의 차이

go는 replace 의 개념이고

push 는 라우터스택에 쌓는 방식이다.

 

go로 하면 뒤로가기를 해도 뒤에 스택이 없어서 뒤로가기를 할 수 없고

push 를 사용해서 화면을 이동했다면 스택이 쌓여서 뒤로가기를 할 수 있다.

 

push 도 사용방법이 go 와 다르지 않는데 

context.push("/ascreen");

 

이렇게 써주면 되고 

 

스택을 쌓으면서 이동하다가도 현재  스택에서는 스택을 쌓는게 아니라 교체를 하고 싶다면 아래처럼 써주면 된다.

context.pushReplacement("/bscreen");

 

화면 이동할때 데이터 같이 넘기기

class Promotion {
  Promotion({required this.id, required this.user, required this.title ,required this.description});

  final String id;
  final String user;
  final String title;
  final String description;

  Promotion copyWith({String? id, String? description, bool? isCompleted}) {
    return Promotion(
      id: id ?? this.id,
      user: this.user,
      title: title,
      description: description ?? this.description,
    );
  }
}

 

대충 이런 데이터가 있다고 치자.

 

그럼 특정 라우터에서 저 값을 전달받고 싶다면 

라우터를 설정할때 

 

GoRoute(
	path: "/promotion",
	name: "promotion",
	builder: (BuildContext context, GoRouterState state) {
		return PromotionView(
               promotion: state.extra as Promotion,
            );
	}
),

 

이렇게 설정을 해주면 된다.

 

이거 외에도

 

쿼리 파마리터 넘기는 방법

콜백 처리하는 방법

리다이렉트 처리

멀티라우팅

 

등이 있는데 나머지까지 다 적으면 글이 너무 길어질거 같아서

담에 만들다가 다른걸 쓸일이 생기면 겸사겸사 적으러 와보겠다. 

귀찮아서 그런거 아님