[Flutter]인스타그램 클론 - 9. 중첩라우팅

들어가며

이 프로젝트는 개발하는남자님의 유튜브 영상을 참고하여 제작하였습니다. 허나, 원본 영상에서 제작하는 방법과는 다를 수 있습니다.

중첩라우팅이란(Nested Routing)

바텀네비게이션을 이용해서 제작한 앱은 해당 바텀페이지에서 여러 페이지로 이동할 경우, 바텀네비게이션이 사라집니다. 이전 시간까지 만든 검색화면이 그렇다고 할 수 있습니다.

지금 이 화면에서는 페이지 이동시에 바텀네비게이션이 유지되지않고 사라지죠? 페이지는 스택방식으로 작동하는데 새로운 페이지 라우팅이 적용되기 때문에 그렇습니다. 이런경우에는 중첩라우팅을 통해서 바텀네비게이션을 유지할 수 있어요.

GetX를 이용한 중첩라우팅

저희의 인스타그램클론은 GetX를 이용해서 만들고 있습니다. 근데, 평범한 방식의 중첩라우팅은 GetX에서 사용하는 Get.to 메소드 등을 사용하지 못해요. 그래서 GetX를 이용한 중첩라우팅을 해보겠습니다.

간단해요. 가장 처음에 바텀네비게이션을 위한 IndexedStack위젯에는 각 페이지 위젯이 들어있죠? Search위젯을 Navigator로 감싸면 됩니다.

//app.dart
...
  Widget _body() {
    return IndexedStack(
      index: controller.pageIndex,
      children: [
        const Home(),
        //중첩 라우팅을 위한 Navigator
        Navigator(
          //key 설정
          key: Get.nestedKey(1),
          onGenerateRoute: (settings) {
          	// 해당 페이지 라우팅
            return GetPageRoute(
              page: () => const Search(),
            );
          },
        ),
        Container(
          color: Colors.green,
        ),
        Container(
          color: Colors.yellow,
        ),
        Container(
          color: Colors.black,
        ),
      ],
    );
  }

이제 중첩을 원하는 페이지는 이동시에 id를 동일하게 적용시키면 됩니다. 저는 1이라고 설정했는데, 다른 키값을 사용해도 돼요. 단, 중첩을 적용시키려면 모든 id가 동일해야합니다. 적용시켜볼게요.

//search_focus.dart
...
  Widget _appBar() {
    return SliverAppBar(
      floating: true,
      title: InkWell(
        highlightColor: Colors.black26,
        borderRadius: BorderRadius.circular(8.0),
        onTap: () {
          Get.to(() => const SearchFocus(),
              transition: Transition.fadeIn,
              binding: SearchFocusBinding(),
              id: 1); // id == 1
        },
        onLongPress: () {
          Get.to(() => const SearchFocus(),
              transition: Transition.fadeIn,
              binding: SearchFocusBinding(),
              id: 1);// id == 1
        },

//search_focus_controller.dart
...
  void submitted(String value) {
    Get.off(() => const SearchResult(), id: 1);
  }

이제 해당하는 페이지의 id를 동일하게 설정했으므로 중첩라우팅 적용이 완료되었습니다.