(Flutter) Auto Route 사용하기

AutoRoute 패키지를 사용하면 네비게이션을 위한 라우트 설정이 매우 간단해집니다.
다양한 타입의 인수 전달이 가능하고 딥링크 구현하는 것도 쉬워집니다.

설치하기

터미널에 명령어를 입력하여 3개를 설치합니다.

$ flutter pub add auto_route
$ flutter pub add -d auto_route_generator
$ flutter pub add -d build_runner

설치가 되고 나면 pubspec.yaml에 패키지 3개가 추가되어 있어야 합니다.

dependencies:        
  auto_route: ^3.2.4      
        
dev_dependencies:        
  auto_route_generator: ^3.2.3
  build_runner: ^2.1.8

그리고 안드로이드에 AndriodX가 활성화 되어 있어야 합니다.
android/gradle.properties 파일에 다음을 추가합니다.

org.gradle.jvmargs=-Xmx1536M
android.enableR8=true
android.useAndroidX=true
android.enableJetifier=true

 

설정하기

그 다음 lib/app_router.dart 파일을 생성합니다.
그리고 다음 코드를 작성합니다.

import 'package:auto_route/annotations.dart';

import 'pages/book_detail_page.dart';
import 'pages/book_list_page.dart';

@MaterialAutoRouter(
  replaceInRouteName: 'Page,Route',
  routes: <AutoRoute>[
    AutoRoute(page: BookListPage, initial: true),
    AutoRoute(page: BookDetailsPage),
  ],
)
class $AppRouter {}

그 다음 터미널에서 build_runner 를 실행합니다.

$ flutter packages pub run build_runner build  

파일을 편집할 때마다 build_runner가 자동 실행되게 하려면, watch 플래그를 사용합니다.

$ flutter packages pub run build_runner watch        

만약 파일을 편집하다가 충돌 발생으로 에러가 나는 경우에는 아래 명령어를 사용합니다.

$ flutter packages pub run build_runner watch --delete-conflicting-outputs

build_runner 실행이 성공했다면 app_router.gr.dart 파일이 생성되었을 것입니다.

 

사용하기

main.dart 의 MaterialApp 클래스에 MaterialApp 에 라우터를 연결합니다.

import 'app_router.gr.dart'; // generator에 의해 자동 생성된 파일

class MyApp extends StatelessWidget {
  MyApp({Key? key}) : super(key: key);

  final _appRouter = AppRouter();

  @override
  Widget build(BuildContext context) {
    return MaterialApp.router(
      routerDelegate: _appRouter.delegate(),
      routeInformationParser: _appRouter.defaultRouteParser(),
      title: 'Flutter Auto Router',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
    );
  }
}

 

화면 간 이동하기 위해서 AutoRouter.of(context).push를 사용합니다.

AutoRouter.of(context).push(const BookDetailsRoute());

위 코드에서 BookDetailsRoute 클래스는 generator에 의해 자동 생성된 파일 app_router.gr.dart에 작성되어 있습니다.