Go router 완전정복!

https://pub.dev/packages/go_router

go_router | Flutter Package

 

세팅하기

이렇게 MaterialApp대신 MaterialApp.router를 써줘야함

그리고 router를 만들어놓고 routerConfig에 넣어주긔

import 'package:flutter/material.dart';

void main() {
  runApp(
    const _App(),
  );
}

class _App extends StatelessWidget {
  const _App({super.key});

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

// lib/router/router.dart
import 'package:go_router/go_router.dart';

final router = GoRouter(
  routes: [
    GoRoute(
      path: '/',
      builder: (context, state) => RootScreen(),
    )
  ],
);

 

Go

네비게이터.어쩌고.저쩌고... 하던 긴 코드를

아래처럼 짧고 간결하고 가독성좋게 축약시킬 수 있다.

context.go('/');

 

Go Named

주소를 일일히 알아야하는게 불편했다면,

GoRoute(
	path: '/',
	name: RootTab.routeName,
	builder: (context, state) => RootTab(),
)

위처럼 name을 설정해주고 아래처럼 씸-플 하게 쓸 수 있다.

context.goNamed(RootTab.routeName);

 

Push

context.go()를 하게되면 router에 정의해 둔 대로 뷰가 중첩된다. (그래서 router에 잘- 정의해둬야한다!)

하지만, 때로는 정의해둔 라우터를 따르면 안되는 경우도 있는데, 그럴때 사용하는게 push이다.

context.push('/mypage');

예를 들어 이렇게 라우터를 정의해뒀다고 하자.

이때 go와 push의 차이는 위와 같다

*다시 정리

go : 선언 그대로 라우트를 처음부터 새로 생성

push : 기존 형성된 라우트 위에 새로운 라우트를 그대로 쌓음

 

Pop

예상가능한대로 이전화면으로 되돌릴 수 있다.

context.pop();

이때 데이터를 주고 받을 수도 있다.

// 이전 화면
onTap : () async {
	final result = await context.push('/one/two');
}

// 다음 화면
onTap : () {
	context.pop('data');
}

Path Parameters

// router.dart 에 라우트정의
GoRoute(
  path: 'board_detail/:id',
  name: BoardDetailScreen.routeName,
  builder: (context, state) => const BoardDetailScreen(),
),

// 사용할때
onTap: (){
  context.go('/board_detail/123');
}

// 받아온 값 사용하기 (확인필요)
final id = GoRouterState.of(context).pathParameters; 
...

특정 변수(1개)를 화면으로 넘기고 싶을때 사용.

중첩해서 사용도 가능

Query Parameters

여러개의 변수를 화면으로 넘기고 싶을때 사용.

// router.dart 에 라우트정의
GoRoute(
  path: '/detail',
  name: BoardDetailScreen.routeName,
  builder: (context, state) => const BoardDetailScreen(),
),

// 사용할때
onTap: (){
  context.go(
  // /detail?name=codefactory&age=32
  // 위의 코드를 쉽게 짤 수 있도록 도와주는 위젯 Uri
  Uri(
    path: '/detail',
    queryParameters: {
      'name': 'codefactory',
      'age': '32',
    },
    ).toString(),
  );
}

// 받아온 값 사용하기 (확인필요)
final id = GoRouterState.of(context).pathParameters; 
...

 

Shell Route

Redirection

Transition Animation

ErrorScreen

Logging