[Flutter] go_router 패키지 사용하기

들어가기 전에... 내가 몰랐던 코드 작성 방식 

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

위 코드에서 (_, __)는 매개변수지만 그 값을 사용하지 않을 때
코드를 더 간결하게 만들어주기 위한 것이다.
두번째 매개변수도 안 쓴다면 __ 언더스코어 두번
만약 쓴다면 (_,state) 이런식으로 쓸 수 있음

 

---

go_router 사용하기

 

Navigator.push(context,MaterialPageRoute(builder: (context) => SettingPage()))

페이지 이동시 평소 위와 같이 flutter에서 제공하는 navigator를 사용하고 있었는데,
go_router 패키지가 더 간단하다는 것을 알게 되었다.

[사용법]

1. 우선 패키지를 설치해준다.

flutter pub add go_router

2. 메인에 MaterialApp에 router를 붙여서 등록해준다.

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

3. lib/에 router를 모아놓을 파일 만들어준다.

4. 

아래와 같이 페이지를 라우터에 등록해준다.

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

왜 중첩 형태일까?

중첩 형태는 하위 페이지를 나타내기 위한 것.
중첩이 아니라면 독립된 페이지라고 생각하면 됨

context.go(경로) 를 통해 간단하게 페이지 이동 구현이 가능함.

class HomeScreen extends StatelessWidget {
  /// Constructs a [HomeScreen]
  const HomeScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Home Screen')),
      body: Center(
        child: ElevatedButton(
          onPressed: () => context.go('/details'),
          child: const Text('Go to the Details screen'),
        ),
      ),
    );
  }
}

혹은 이름을 설정하여 이름으로 이동할 수도 있음

-> goNamed('이름');

(단, 독립적인 페이지에 한 하여 가능함.
중첩으로 어떤 페이지에 속하는 하위 페이지일 경우 해당 방식은 오류가 발생함)

context.goNamed('details');

아래처럼 이런식으로 부모 경로를 알려주면 오류가 발생하지 않음💦
그냥 절대 경로를 써주는 편이 덜 복잡할듯 하다

context.goNamed('details', pathParameters: {'home': '/'});