[Flutter] auto route 를 이용한 화면 이동 1

동동·2022년 6월 14일

flutter auto_route

목록 보기

1/2

기본적으로 Flutter 는 자체적으로 route 기능을 제공하고 있다.
하지만 auto_route 패키지를 사용하면 route 설정이 간편해지며, 로그인 권한에 따른 라우팅 등 앱이 커지면서 발생하는 여러 문제점을 쉽게 해결할 수 있게 해준다.

설치

3개의 패키지를 설치해 주어야 한다.

dependencies:            
  auto_route: [latest-version]            
            
dev_dependencies:            
  auto_route_generator: [latest-version]            
  build_runner:

auto_route 는 auto_route 를 사용하기 위한 기본 패키지이며, auto_route_generator 와 build_runner 는 auto_route 설정을 통해 route 파일을 만들기 위한 generator 이다.

설정하기

app_router.dart 파일 생성

route 설정을 위해 app_router.dart 파일을 만들어주자.
이 파일에는 앱에서 사용하는 전체 화면 정보가 표시되며, 각 화면으로 이동하기 위한 route 정보가 들어간다.

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

replaceInRouteName : route 할 화면의 이름에서 generated 파일에 어떻게 변경할지 설정한다.
'Page,Route' 화면 이름의 Page 를 Route 로 변경함
ex) BookListPage -> BookListRoute
routes : route 할 화면 정보들을 표시

generate .gr 파일

BookListPage 화면을 초기 화면으로 하는 route 설정을 만들었다.
이제 터미널에서 아래 명령어를 실행해주자
watch flag 를 주게 되면 app_router 파일이 변경 될 때마다 자동으로 rebuild 하게 된다.

flutter packages pub run build_runner watch

만약 generate 를 한번만 하고 싶다면 watch flag 대신 build flag 를 사용하면 된다.

flutter packages pub run build_runner build

위 명령어를 실행해 주면 app_router.dart 위치에 app_roter.gr.dart 파일이 자동으로 생성되는것을 볼 수 있다.

생성된 app_router.gr.dart 파일을 보면 app_router.dart 파일에서의 정보를 기반으로 PageRouteInfo object 를 상속 받아 생성된것을 볼 수 있다.

class BookListRoute extends PageRouteInfo {            
  const BookListRoute() : super(name, path: '/books');            
            
  static const String name = 'BookListRoute';            
}

이제 BookListPage 화면으로 이동하기 위해 BookListRoute() 클래스를 호출하면 된다.

이제 화면에서 어떻게 화면 이동이 일어나는지 확인 해 보자.
AutoRouter 또한 push, pop 과 같은 잘 알려진 방식을 제공한다.

우선 아래와 같은 방법으로 AutoRouter 를 가지고 올 수 있다.

final _appRouter = AutoRouter.of(context)

push

화면 이동을 하기 위해 새로운 화면을 추가한다.

_appRouter.push(const BookListRoute());
_appRouter.pushNamed('/books');

// 여러 화면을 동시에 추가한다.
_appRouter.pushAll([
	BookListRoute(),
    BookDetailRoute(id:1)
]);

replace

push 는 현재 화면 위에 새로운 화면을 추가하지만 replace 는 화면 교체를 위해 현재 화면을 제거하고 새로운 화면을 추가한다.

_appRouter.replace(const BookListRoute());
_appRouter.replaceNamed('/books');

현재 화면에서 뒤로 이동하기 현재 화면을 제거한다.

// 마지막 화면 pop
_appRouter.pop();	

// 특정 화면까지 pop
_appRouter.popUntil((route) => route.name == 'HomeRoute');
_appRouter.popUntilRouteWithName('HomeRoute');

// root 화면까지 pop
_appRouter.popUntilRoot();

navigate

만약 화면 히스토리에 해당 화면이 있다면 그 화면까지 pop 하나, 히스토리에 해당 화면이 없다면 해당 화면이 추가된다.

_appRouter.navigate(const BookListRoute());
_appRouter.navigateNamed('/books');

결론

지금까지 기본적인 auto_route 의 기능을 알아보았다.
기본적인 기능만으로도 auto_route 를 이용하면 손쉽게 화면이동을 구현할 수 있다. 하지만 auto_route 의 더 좋은 기능은 nested 된 화면으로 routing 이다. 다음 글에서는 auto_route 의 nested 화면 이동에 대해서 알아보자

동동

다음 포스트

[Flutter] auto route 를 이용한 화면 이동 1