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

in kr-dev 커뮤니티2 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에 작성되어 있습니다.

Sort:  
 2 years ago 

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

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

Coin Marketplace

STEEM 0.18
TRX 0.15
JST 0.029
BTC 62938.05
ETH 2552.06
USDT 1.00
SBD 2.63