Stacked - Navigation Basics

🚦 Navigation Basics (기본 네비게이션)

Stacked에서는 네비게이션을 쉽게 관리할 수 있도록 NavigationService와 자동 라우팅 시스템을 제공합니다. 이로 인해 ViewModel에서도 자유롭게 화면 전환이 가능하고, 코드가 깔끔해집니다.

---

✅ 1. stacked_generator를 통한 자동 라우트 생성

먼저 라우팅을 자동화하기 위해 아래 설정을 해줘야 합니다.

app.dart 파일 생성 예시:

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

• @StackedApp 애너테이션을 통해 앱 내 라우트를 정의합니다.
• MaterialRoute를 사용하여 일반 화면 이동을 설정합니다.

🔁 build_runner로 코드 생성

flutter pub run build_runner build --delete-conflicting-outputs

→ 자동으로 app.router.dart, app.dart 등이 생성됨.

---

✅ 2. 네비게이션 서비스 등록

서비스를 전역에서 사용하려면 의존성 주입 설정에 추가해야 합니다.

final locator = StackedLocator.instance;

void setupLocator() {
  locator.registerLazySingleton(() => NavigationService());
}

---

✅ 3. 화면 이동하기

ViewModel에서 이동:

final _navigationService = locator<NavigationService>();

_navigationService.navigateToHomeView();

위 함수는 자동 생성된 라우트 이름 기반으로 만들어진 메서드입니다.

---

✅ 4. 인자 전달하기

_navigationService.navigateToDetailsView(
  id: 5,
  name: 'Stacked',
);

→ 라우트 설정 시 DetailsView가 named parameters를 받도록 정의되어 있다면 이렇게 전달 가능.

---

✅ 5. 화면 되돌아가기

_navigationService.back();

→ 이전 화면으로 돌아가는 기본 동작.

---

✅ 6. 화면 교체 (뒤로 가기 불가능)

_navigationService.replaceWithHomeView();

→ 현재 화면을 대체하고 새로운 화면으로 이동합니다.

---

🔧 주요 장점

• ViewModel에서 화면 전환이 가능 → 비즈니스 로직과 UI 완전 분리
• 라우트 자동 생성 → 실수 줄고 유지보수 쉬움
• 매개변수 전달, 뒤로가기 등 네비게이션 처리 용이

---

📌 정리

기능	코드 예시
화면 이동	_navigationService.navigateToHomeView();
인자 전달	_navigationService.navigateToDetailsView(id: 1);
화면 교체	_navigationService.replaceWithLoginView();
뒤로 가기	_navigationService.back();

---

알아보면 좋을 내용

• routes.dart의 커스텀 경로 설정법
• BottomSheet, Dialog와의 연동

출처 : Stacked 공식 문서 - Navigation Basics