플러터에서 go_router 패키지 사용법 및 옵션

Flutter에서 go_router 패키지는 강력하고 유연한 라우팅 기능을 제공하여 네비게이션을 쉽게 구현할 수 있게 해줍니다.

이 글에서는 go_router 패키지의 사용법과 다양한 옵션에 대해 알아보겠습니다.

 

1. go_router 소개

go_router는 Flutter 애플리케이션에서 라우팅을 쉽게 구현할 수 있도록 도와주는 패키지입니다. 이 패키지는 Flutter의 Navigator 2.0 API를 기반으로 하며, 복잡한 네비게이션 로직을 단순화하고 다양한 라우팅 기능을 제공합니다.

2. go_router 설치

go_router 패키지를 사용하기 위해서는 pubspec.yaml 파일에 다음과 같이 추가해야 합니다

dependencies:
  flutter:
    sdk: flutter
  go_router: ^5.0.0

그리고 패키지를 설치합니다

flutter pub get

3. 기본 사용법

기본적으로 go_router를 사용하여 라우트를 정의하고 네비게이션을 구현하는 방법을 살펴보겠습니다.

라우터 설정

import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';

void main() {
  final GoRouter _router = GoRouter(
    routes: [
      GoRoute(
        path: '/',
        builder: (context, state) => HomeScreen(),
      ),
      GoRoute(
        path: '/details',
        builder: (context, state) => DetailsScreen(),
      ),
    ],
  );

  runApp(MyApp(router: _router));
}

class MyApp extends StatelessWidget {
  final GoRouter router;

  MyApp({required this.router});

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

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Home')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            context.go('/details');
          },
          child: Text('Go to Details'),
        ),
      ),
    );
  }
}

class DetailsScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Details')),
      body: Center(child: Text('Details Screen')),
    );
  }
}

4. 고급 기능 및 옵션

네스티드 라우팅

네스티드 라우팅을 사용하면 계층적으로 구성된 화면들을 관리할 수 있습니다. 예를 들어, 카테고리 화면에서 특정 카테고리를 선택하면 해당 카테고리의 제품 목록 화면으로 이동할 수 있습니다.

final GoRouter _router = GoRouter(
  routes: [
    GoRoute(
      path: '/',
      builder: (context, state) => HomeScreen(),
      routes: [
        GoRoute(
          path: 'category/:id',
          builder: (context, state) {
            final id = state.params['id'];
            return CategoryScreen(categoryId: id);
          },
        ),
      ],
    ),
  ],
);

파라미터 전달

화면 간에 데이터를 전달하기 위해 파라미터를 사용할 수 있습니다.

GoRoute(
  path: '/details/:id',
  builder: (context, state) {
    final id = state.params['id'];
    return DetailsScreen(id: id);
  },
);

전달된 파라미터는 state.params를 통해 접근할 수 있습니다.

인증 및 권한 관리

사용자 인증 및 권한에 따라 접근 가능한 화면을 제어할 수 있습니다.

final GoRouter _router = GoRouter(
  routes: [
    GoRoute(
      path: '/',
      builder: (context, state) => HomeScreen(),
    ),
    GoRoute(
      path: '/profile',
      builder: (context, state) => ProfileScreen(),
      redirect: (context, state) {
        final isLoggedIn = checkIfLoggedIn(); // 로그인 여부 확인 함수
        if (!isLoggedIn) return '/login';
        return null;
      },
    ),
  ],
);

딥 링크

외부 URL을 통해 앱 내 특정 화면으로 직접 이동하는 기능입니다.

final GoRouter _router = GoRouter(
  initialLocation: '/home',
  routes: [
    GoRoute(
      path: '/home',
      builder: (context, state) => HomeScreen(),
    ),
    GoRoute(
      path: '/details/:id',
      builder: (context, state) {
        final id = state.params['id'];
        return DetailsScreen(id: id);
      },
    ),
  ],
);

5. 플러터 라우터 사용 시 주의 사항

라우트 정의의 명확성

라우트를 명확하고 이해하기 쉽게 정의해야 코드 유지 관리가 용이합니다.

성능 최적화

불필요한 화면 전환 애니메이션의 사용을 줄이고, 메모리 관리를 효율적으로 해야 합니다.

보안

딥 링크 기능을 사용하는 경우, 악의적인 URL을 통해 앱 내부에 접근하는 것을 방지하기 위한 보안 조치가 필요합니다.

결론

go_router 패키지는 Flutter에서 강력한 라우팅 기능을 제공하여 네비게이션을 쉽고 효율적으로 구현할 수 있게 도와줍니다. 기본적인 사용법부터 고급 기능까지 다양한 옵션을 활용하여 사용자에게 더 나은 경험을 제공할 수 있습니다. Flutter 애플리케이션에서 go_router를 활용해보세요!

 

 

수발가족을 위한 일기장 “나비일기장”

 

https://play.google.com/store/apps/details?id=com.maccrey.navi_diary_release

 

구글플레이 앱 배포의 시작! 비공개테스트 20명의 테스터모집을 위한 앱 "테스터 쉐어"

 

https://play.google.com/store/apps/details?id=com.maccrey.tester_share_release

Tester Share [테스터쉐어] - Google Play 앱

카카오톡 오픈 채팅방

https://open.kakao.com/o/gsS8Jbzg