Stacked - Routing Basics

🚦 Stacked Router - Routing Basics

Stacked Router는 auto_route 패키지를 기반으로 구축된 자동 라우팅 시스템입니다.
Stacked는 이를 감싸 더 간단하고 구조적인 라우팅 구성을 제공합니다.

---

✅ 핵심 목표

• 라우트를 중앙에서 선언
• 코드 생성으로 타이핑 없이 안전하게 라우팅
• ViewModel에서도 라우팅 가능

---

1️⃣ @StackedApp에 라우트 선언

먼저 app.dart 파일에 라우트 정의를 합니다.

@StackedApp(
  routes: [
    MaterialRoute(page: HomeView),
    MaterialRoute(page: DetailsView),
  ],
)
class App {}

• @StackedApp은 라우팅, Dialog, BottomSheet 설정 등을 포함한 중앙 설정
• MaterialRoute는 기본 화면 전환 방식

📌 이 설정 후 flutter pub run build_runner build를 실행하여 자동으로 코드가 생성됩니다.

---

2️⃣ 자동 생성되는 파일

위 설정을 하면 다음 파일이 생성됩니다:

• app.router.dart → 라우터 클래스 정의
• app.dart → 메인 앱 설정에서 사용

MaterialApp.router(
  routerDelegate: StackedRouter().delegate(),
  routeInformationParser: StackedRouter().defaultRouteParser(),
)

---

3️⃣ 네비게이션 서비스에서 라우트 사용

Stacked는 자동 생성된 라우트 이름을 기반으로 메서드를 제공합니다.

final _navigationService = locator<NavigationService>();

_navigationService.navigateToHomeView();
_navigationService.replaceWithDetailsView();
_navigationService.back();

---

4️⃣ 파라미터 전달

라우트를 정의한 View가 @RoutePage()를 사용하고 있다면, 다음처럼 파라미터를 전달할 수 있습니다:

_navigationService.navigateToDetailsView(id: 1, title: '상세 화면');

View에서는 생성자로 파라미터를 받을 수 있습니다:

@RoutePage()
class DetailsView extends StatelessWidget {
  final int id;
  final String title;

  const DetailsView({required this.id, required this.title, super.key});
}

---

✅ 요약

항목	설명
@StackedApp	앱의 라우트 중앙 선언
MaterialRoute	기본 라우트 타입
navigationService.navigateToXXXView()	화면 전환
flutter pub run build_runner build	자동 라우트 코드 생성
파라미터 전달	생성자 기반 전달 가능

---

💡 장점

• 라우트 이름, 파라미터 자동 코드 생성 → 실수 줄어듦
• ViewModel에서도 화면 전환 → UI 로직과 분리
• @StackedApp 한 곳에서 앱 전역 구성

---

알아보면 좋을 내용

• @RoutePage에 애니메이션 효과나 CupertinoRoute, CustomRoute 등의 고급 설정

출처 : Stacked 공식 문서 - Routing Basics