플러터Flutter에서 Auto Route 사용하기

in hive-137029 •  3 years ago  (edited)

AutoRoute

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.dartMaterialApp 클래스에 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에 작성되어 있습니다.

Authors get paid when people like you upvote their post.
If you enjoyed what you read here, create your account today and start earning FREE STEEM!
Sort Order:  

[광고] STEEM 개발자 커뮤니티에 참여 하시면, 다양한 혜택을 받을 수 있습니다.

Upvoted! Thank you for supporting witness @jswit.
special.jpg