Flutter _ Navigator and Routing

230614

 

---

오늘은 Widget의 이동을 담당하는

Navigator에 대해 포스팅 하겠다.

 

---

앱을 사용하다 보면

흔히 볼수있는 화면의 이동.

 

앱 개발자라면 필수로 알고있어야하고

자주 사용하기 때문에

 

개념을 정확하게 알고있어야 된다고 생각한다.

 

 

https://docs.flutter.dev/ui/navigation

 

Navigation and routing

 

Flutter 공식 Documentation를 참고하여

Navigator는 무었이고

어떤 역할을 하는지

무엇을 할 수 있는지 알아보자.

 

 

---

1.  Navigator?

 

Flutter에서는 화면 사이를 이동하고

DeepLinks를 처리할 수 있는

완벽한 시스템을 제공하는데

 

복잡한 DeepLinks가 아니라면

Navigator를 통해 해결이 가능하다.

 

만약 특정 DeepLinks 및 탐색을 요구하는 응용프로그램이라면

Router를 사용하여 Android나 iOS에서 DeepLinks를 처리할 수 있다.

 

 

💡 Deep Linking

 

Flutter는 iOS나 Andorid 및 Web에 Deep Linking을 지원한다.

 

Deep Linking은

URL을 열면 앱에 해당 화면이 표시되는 기능으로

 

Deep Linking을 수행하려면

명명된 경로(routes 매개 변수, GenerateRoute)를 사용하거나

Router 위젯을 사용하면 된다.

 

📌 공식 Document

 

https://docs.flutter.dev/ui/navigation/deep-linking

Deep linking

 

Navigator 위젯은

사용중인 플랫폼에서 Stack을 사용하여

애니메이션 효과와 함께

화면을 표시한다.

 

onPressed: () {
  Navigator.of(context).push(
    MaterialPageRoute(
      builder: (context) => const SongScreen(song: song),
    ),
  );
},
child: Text(song.name),

만약 예시 코드와 같이

SongScreen()으로 이동하기 위해서는

 

해당 Route(경로)의 BuildContext를 통해

Navigator에 엑세스하고

 

push() 또는 pop()이라는 필수 메서드를 호출해야한다.

 

 

메모리 구조를 조금이라도 아는 사람은

push와 pop이 굉장히 익숙한 단어일텐데

 

자료구조 Stack

 

이 두 필수 메서드가 등장하는 이유는

Navigator가 Route(경로) 라는 Objects(객체)를

Stack방식으로 가지고 있기 때문이다.

 

그래서 push()나 pop()은 

Route라는 인자값을 필수로 필요로한다.

 

💡 MaterialPageRoute

 

MaterialPageRoute는 Route의 하위 클래스로

MaterialDesign의 애니메이션을 사용하게 해준다.

 

만약 Navigator를 어떻게 사용할 수 있는지

예시가 보고싶다면

 

https://docs.flutter.dev/cookbook#navigation

Cookbook

Flutter Cookbook의 Navigation을 참고하거나

 

https://api.flutter.dev/flutter/widgets/Navigator-class.html

Navigator class - widgets library - Dart API

Navigator API documentation을 읽어보자.

 

---

2. Named Routes

 

간단한 이동이나 Deep Linking을

요구하는 Applications는

 

MaterialApp의 routes로 Deep Link를 사용할 수 있다.

 

 

@override
  Widget build(BuildContext context) {
  return MaterialApp(
    routes: {
      '/': (context) => HomeScreen(),
      '/details': (context) => DetailScreen(),
    },
  );
}

이때 위와 같이

routes에 내가 이름지은 경로를

Named Routes라고 한다.

 

https://docs.flutter.dev/cookbook/navigation/named-routes

Navigate with named routes

Named Routes의 다양한 예시도

위의 Flutter Cookbook에서 확인할 수 있다.

 

하지만 공식 Documentation에서도 경고 하듯이

Named Routes 사용을 추천하지 않는다.

 

두가지 이유가 있는데

 

첫 번째는 

 

만약 새로운 Deep Link를 플랫폼이 받는 경우

 

Flutter는

사용자가 현재 어느 위치에 있던 새로운 Route로 보내는데  

 

이 행동이 일방적이고 바꿀 수 없기 때문이다.

 

 

두 번째는

Named Routes를 사용한

applications에

 

Flutter가 앞으로 가기 버튼을 지원하지 않기 때문이다.

 

아직 개발이 안된건지 모르겠지만

위의 두 가지 오류때문에 Flutter는

Named Route를 추천하지 않는다고 한다.

 

 

---

3. GoRouter

 

만약 각 화면에 직접 링크를 걸고 싶거나

여러개의 Navigator를 사용하는

고급 탐색 및 Router 요구사항이 있는

Application일 경우

 

GoRouter를 사용하여

새로운 DeepLink를 수신할 때마다

경로를 분석하고 Navigator를 구성할 수 있다.

 

MaterialApp.router(
  routerConfig: GoRouter(
    // …
  )
);

이러한 Router를 사용하기 위해서는

 

MaterialApp이나 CupertinoApp의 router 생성자를

재 구성하면 된다.

 

그리고 GoRouter의 경우 선언을 하는 형식이기 때문에

DeepLink를 수신할 때마다 동일한 화면을 보여준다.

 

 

만약 개발의 고수라면

 

Routing Package를 사용하지 않고

Navigation이나 Routing을 컨트롤 할 수 있는 방법이 있다.

 

바로 RouteInformationParser와 RouterDelegate라는

위젯을 사용하는 것인데

 

https://api.flutter.dev/flutter/widgets/Router-class.html

Router class - widgets library - Dart API

 

만약 관심이 있다면 위의 공식 문서를 보길 바란다.

 

---

오늘은 Flutter가 지원하는

이동 기능에 대해서 자세히 알아보았다.

 

포스팅 내용 말고도

Flutter Documentation에 추가 정보들이 있으니 

관심이 있다면 읽어보길 바란다.