[Flutter] Stacked Services Navigator 정리

<분류>
A. 수단
- OS/Platform/Tool : Linux, Kubernetes(k8s), Docker, AWS
- Package Manager : node.js, yarn, brew, 
- Compiler/Transpillar : React, Nvcc, gcc/g++, Babel, Flutter
- Module Bundler  : React, Webpack, Parcel

B. 언어
- C/C++, python, Javacsript, Typescript, Go-Lang, CUDA, Dart, HTML/CSS

C. 라이브러리 및 프레임워크 및 SDK
- OpenCV, OpenCL, FastAPI, PyTorch, Tensorflow, Nsight

 

---

1. What? (현상)

Stacked_Services란 Stacked 패키지로 아키텍처를 구성했을 때 함께 사용할 수 있는 서비스로, 아래와 같은 편리한 기능들을 제공합니다.

• NavigationService: navigation 기능으로, 페이지 간 이동에 사용합니다.
• DialogService: dialog를 보여주기 위한 기능입니다.
• BottomSheetService: bottom sheet을 보여주기 위한 기능입니다.
• SnackbarService: snack bar를 보여주기 위한 기능입니다.

[순서대로 DialogService, BottomSheetService, SnackBarService 예시]

 

이 중 가장 기본적인 기능인 Navigation의 방법에 대해 정리하고자 합니다.

 

---

2. Why? (원인)

• X

---

3. How? (해결책)

• 기본적인 사용법 예시
  • app.locator.dart에 replaceWithMyHomeView()라는 함수가 생성되고, 아래와 같이 페이지를 이동할 수 있습니다.

import 'package:stacked_services/stacked_services.dart';
import 'package:MyProject/app/app.locator.dart';

final NavigationService _navigationService = locator<NavigationService>();

_navigationService.replaceWithMyHomeView();

• NavigationService의 메서드들을 정리하면 아래와 같습니다.
  • config : navigation 시의 셋팅을 만들어 줄 수 있습니다.
  • back : navigation stack에서 pop을 하며 이동합니다.
  • popUntil & popRepeated : navigation stack에서 pop을 특정한 조건을 활용해 하며 이동합니다.
  • navigateTo & navigateToView & navigateWithTransition : navigation stack에 push를 해주며 이동합니다. 
  • replaceWith & replaceWithTransition : 현재의 Route를 새로운 곳으로 아예 바꿔줍니다. 주로 Landing Page이후에 사용합니다.
  • clearStackAndShow & clearTillFirstAndShow & clearTillFirstAndShowView :  navigation stack에서 clear를 특정한 조건을 활용해 하며 이동합니다. : 
  • pushNamedAndRemoveUntil : 해당 route를 push하고 predicate가 만족할 때까지의 stack을 clear합니다.
    ** Predicate : argument를 받아 boolean 값을 반환하는 함수형 인터페이스
    ex) bool Function(Route<dynamic> route);

 

---