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.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
에 작성되어 있습니다.
[광고] STEEM 개발자 커뮤니티에 참여 하시면, 다양한 혜택을 받을 수 있습니다.
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
Upvoted! Thank you for supporting witness @jswit.
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit