auto_route

Flutter를 사용하면서 불편함이 해소되었던 패키지들을 소개 해 보고자 합니다.

Flutter의 기본 적인 내용(설치 방법 등)은 생략합니다.

auto_route | Flutter package

AutoRoute is a declarative routing solution, where everything needed for navigation is automatically generated for you.

Dart packages

이 패키지는 화면 전환을 쉽게 도와주는 패키지 입니다.

기본적으로 플러터에서 네비게이션을 구현하려면 Navigator.push와 같은 메서드를 사용하여 페이지를 이동시키거나, route를 직접 정의하여 화면 간의 전환을 관리해야 합니다. 이러한 방법은 초기에는 간단해 보일 수 있지만, 프로젝트가 커지고 화면이 많아지면 코드가 복잡해지고, 특히 네비게이션 경로를 변경하거나 관리할 때 실수가 발생하기 쉽습니다.

auto_route는 라우트 설정을 자동화하고, 타입 안전성을 보장하며, 더욱 간결한 네비게이션 코드를 작성할 수 있도록 돕습니다.

주요 기능

• 자동 생성된 라우트: auto_route는 라우트를 자동으로 생성하여, 개발자가 경로를 일일이 수동으로 정의할 필요가 없습니다. 이를 통해 네비게이션 관리가 훨씬 수월해집니다.
• 타입 안전성: 잘못된 경로나 파라미터를 사용할 경우 컴파일 타임에 오류를 발견할 수 있어, 런타임 오류를 줄일 수 있습니다.
• 간결한 코드: 기존의 복잡한 네비게이션 코드가 간단하고 명확해집니다. 예를 들어, context.router.push(HomeRoute())와 같은 코드로 쉽게 화면 전환을 처리할 수 있습니다.

사용 방법

라우트 정의

@AutoRouteConfig를 사용하여 라우트를 정의합니다.

@AutoRouterConfig()
class AppRouter extends $AppRouter {
  @override
  final List<AutoRoute> routes = [
    AutoRoute(page: HomePage, initial: true),
    AutoRoute(page: SettingsPage),
  ];
}

페이지 정의

각 페이지는 @RoutePage를 사용하여 구성합니다.

@RoutePage()
class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Home')),
      body: Center(child: Text('Home Page')),
    );
  }
}

@RoutePage()
class SettingsPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Settings')),
      body: Center(child: Text('Settings Page')),
    );
  }
}

네비게이션 사용

생성된 라우트를 사용하여 네비게이션을 처리합니다.

context.router.push(const SettingsRoute());

Code gen

앞서 소개드렸던 flutter_gen과 마찬가지로 페이지 라우팅에 관한 코드가 자동생성 되는 구조입니다. 정상적인 사용을 위해서는 아래와 같은 build 과정이 필요합니다

dart run build_runner build