flutter - go_router 패키지

Flutter에서 네비게이션을 관리하는 방법에는 여러 가지가 있습니다. 그중에서 go_router 패키지는 선언적이고 직관적인 라우팅을 제공하며 이번 포스팅에서는 go_router를 사용하여 Flutter 애플리케이션의 네비게이션을 관리하는 방법을 살펴보겠습니다.

go_router란?

go_router는 Flutter 애플리케이션에서 라우팅을 단순화하는 데 사용되는 패키지입니다. 이 패키지는 Flutter의 기본 네비게이션 방법보다 더 선언적이고, 특히 복잡한 네비게이션 로직을 간결하게 작성할 수 있도록 돕습니다.

go_router 설치

https://pub.dev/packages/go_router

flutter pub add go_router

import 'package:go_router/go_router.dart';

class RoutePath {
	static const String main = '/main';
    static const String splash = '/splash';
}

route_path.dart 휴먼에러를 줄이기 위해 클래스로 관리합니다.

final GoRouter _router = GoRouter(
    routes: [
      GoRoute(
        path: '/',
        builder: (context, state) => HomePage(),
      ),
      GoRoute(
        path: '/splash',
        builder: (context, state) => Splash(),
      ),
    ],
  );

routes.dart 파일로 routes를 관리합니다.

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    return MaterialApp.router(
		routerConfig: routers,
        ..
    );
  }
}

MaterialApp.router를 사용하여 Flutter 애플리케이션에 라우터를 설정합니다.

class SplashPage extends StatefulWidget {
  const SplashPage({super.key});

  @override
  State<SplashPage> createState() => _SplashPageState();
}

class _SplashPageState extends State<SplashPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Splash Page'),
      ),

      body:  Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Text('Splash Page'),
            TextButton(
                onPressed: ()  {
                  context.go(RoutePath.main);
            },
                child: const Text('Go to Main Page ->')),
          ],
        ),
      ),
    );
  }
}

class MainPage extends StatefulWidget {
  const MainPage({super.key});

  @override
  State<MainPage> createState() => _MainPageState();
}

class _MainPageState extends State<MainPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Main Page'),
      ),

      body: const Center(
        child: Text('Main Page'),
      ),
    );
  }
}

Splash, Main 화면을 간단하게 만들어줍니다.Splash 화면에는 메인화면으로 이동할 수 있는 버튼을 추가 해줍니다. Splash의 context.go(RoutePath.main) go_router를 사용하면 context를 통해 쉽게 다른 경로로 이동할 수 있습니다.

결론

go_router는 Flutter에서 복잡한 네비게이션 구조를 관리하는 데 매우 유용한 패키지입니다. 선언적인 라우팅 방법과 간단한 설정으로 다양한 네비게이션 요구사항을 쉽게 구현할 수 있습니다. 프로젝트의 필요에 맞게 go_router를 활용해 보세요.

위 내용은 Flutter 프로젝트에서 go_router를 사용하여 네비게이션을 관리하는 방법을 소개했습니다. 프로젝트에 따라 다양한 기능을 더할 수 있으니, 필요에 맞게 커스터마이징해보세요!