Friday, July 14, 2023

Flutter navigator 2.0에서 현재 페이지 확인하기
  /   No comments   

Flutter Navigator 2.0의 새로운 네비게이션 구조 이해

Flutter Navigator 2.0은 기존의 Navigator 1.0을 대체하기 위해 도입된 선언적인 방식의 네비게이션 구조입니다. 이 새로운 구조를 이해하기 위해서는 몇 가지 중요한 구성 요소와 개념을 배워야 합니다.

Navigator 2.0의 중요한 컴포넌트들

Flutter Navigator 2.0은 라우팅을 담당하는 몇 가지 중요한 컴포넌트를 제공합니다:

  1. RouteInformation: 앱 내 위치 정보와 웹 브라우저의 URI를 연결하는 정보를 담당합니다.
  2. RouteInformationParser: RouteInformation를 앱의 데이터 구조로 변환하는 클래스입니다.
  3. RouterDelegate: 앱의 라우팅 테이블을 관리하고 페이지의 동적 변화를 담당하는 클래스입니다.
  4. Router: 위의 세 가지 컴포넌트를 결합하여 페이지 네비게이션을 제어하는 역할을 합니다.

URL과 페이지 네비게이션의 새로운 연결 방식

Navigator 1.0에서는 사용자가 정의한 이름을 사용하여 라우팅을 직접 호출해야 했습니다. 하지만 Navigator 2.0에서는 이러한 방식이 더 이상 필요하지 않습니다. 대신 URL과 같이 앱의 상태가 주소 형식으로 표현되는 브라우저의 방식을 따릅니다.

앱 내에서 사용자 작업에 따라 동적으로 변경되는 라우팅의 상태를 관리하려면, RouterDelegate와 RouteInformationParser를 활용해야 합니다.

다음 섹션에서는 현재 페이지를 확인하기 위해 RouterDelegate와 RouterInformationParser를 어떻게 활용하는지에 대해 자세히 설명하겠습니다.

RouterDelegate와 RouterInformationParser를 활용한 현재 페이지 확인 방법

RouterDelegate와 RouterInformationParser는 Navigator 2.0에서 앱의 현재 페이지와 라우팅 상태를 확인하고 관리하는 중요한 컴포넌트입니다. 이 두 컴포넌트를 효과적으로 활용하면 현재 페이지를 정확하게 파악할 수 있습니다.

RouterDelegate의 역할과 사용 방법

RouterDelegate는 라우팅 상태와 페이지의 변화를 관리합니다. 이를 사용하려면 RouterDelegate<T>에서 T를 앱 상태로 바꾼 클래스를 상속받아야 합니다. RouterDelegate는 다음과 같은 메서드를 반드시 구현해야 합니다:

class CustomRouterDelegate<T> extends RouterDelegate<T> with ChangeNotifier, PopNavigatorRouterDelegateMixin<T> {
  // 현재 state 반환
  @override
  T get currentConfiguration {...}

  // 새로운 state가 설정되면 네비게이션 테이블을 업데이트하는 메서드
  @override
  Future<void> setNewRoutePath(T configuration) {...}

  // navigator의 현재 stack을 가리키는 메서드
  @override
  GlobalKey<NavigatorState> get navigatorKey {...}

  // 현재 페이지를 반환하는 메서드
  @override
  Widget build(BuildContext context) {...}
}

RouteInformationParser의 역할과 사용 방법

RouteInformationParser는 웹 브라우저의 URL과 앱 내부의 라우팅 정보를 변환하는 역할을 합니다. 이 클래스를 사용하려면 RouteInformationParser<T>에서 T를 앱 상태로 바꾼 클래스를 상속받아 구현해야 합니다:

class CustomRouteInformationParser<T> extends RouteInformationParser<T> {
  // URL을 앱 state로 변환하는 메서드
  @override
  Future<T> parseRouteInformation(RouteInformation routeInformation) {...}

  // 앱 state를 URL로 변환하는 메서드
  @override
  RouteInformation restoreRouteInformation(T configuration) {...}
}

이제 CustomRouterDelegate와 CustomRouteInformationParser를 활용하여 앱의 현재 페이지를 확인하는 방법에 대해 알아보겠습니다. 다음 섹션에서는 현재 페이지를 확인하는 실제 예제와 결론을 제공하겠습니다.

RouterDelegate와 RouterInformationParser를 활용한 현재 페이지 확인 방법

RouterDelegate와 RouterInformationParser는 Navigator 2.0에서 앱의 현재 페이지와 라우팅 상태를 확인하고 관리하는 중요한 컴포넌트입니다. 이 두 컴포넌트를 효과적으로 활용하면 현재 페이지를 정확하게 파악할 수 있습니다.

RouterDelegate의 역할과 사용 방법

RouterDelegate는 라우팅 상태와 페이지의 변화를 관리합니다. 이를 사용하려면 RouterDelegate<T>에서 T를 앱 상태로 바꾼 클래스를 상속받아야 합니다. RouterDelegate는 다음과 같은 메서드를 반드시 구현해야 합니다:

class CustomRouterDelegate<T> extends RouterDelegate<T> with ChangeNotifier, PopNavigatorRouterDelegateMixin<T> {
  // 현재 state 반환
  @override
  T get currentConfiguration {...}

  // 새로운 state가 설정되면 네비게이션 테이블을 업데이트하는 메서드
  @override
  Future<void> setNewRoutePath(T configuration) {...}

  // navigator의 현재 stack을 가리키는 메서드
  @override
  GlobalKey<NavigatorState> get navigatorKey {...}

  // 현재 페이지를 반환하는 메서드
  @override
  Widget build(BuildContext context) {...}
}

RouteInformationParser의 역할과 사용 방법

RouteInformationParser는 웹 브라우저의 URL과 앱 내부의 라우팅 정보를 변환하는 역할을 합니다. 이 클래스를 사용하려면 RouteInformationParser<T>에서 T를 앱 상태로 바꾼 클래스를 상속받아 구현해야 합니다:

class CustomRouteInformationParser<T> extends RouteInformationParser<T> {
  // URL을 앱 state로 변환하는 메서드
  @override
  Future<T> parseRouteInformation(RouteInformation routeInformation) {...}

  // 앱 state를 URL로 변환하는 메서드
  @override
  RouteInformation restoreRouteInformation(T configuration) {...}
}

이제 CustomRouterDelegate와 CustomRouteInformationParser를 활용하여 앱의 현재 페이지를 확인하는 방법에 대해 알아보겠습니다. 다음 섹션에서는 현재 페이지를 확인하는 실제 예제와 결론을 제공하겠습니다.

현재 페이지 확인을 위한 실제 예제

이제 CustomRouterDelegate와 CustomRouteInformationParser를 활용하여 현재 페이지를 확인하는 실제 예제를 살펴보겠습니다. 우리의 예제 앱에는 "home" 페이지와 "detail" 페이지가 있다고 가정하겠습니다.

커스텀 라우팅 클래스 정의하기

enum AppPage { home, detail }

class CustomRouterDelegate extends RouterDelegate<AppPage> with ChangeNotifier, PopNavigatorRouterDelegateMixin<AppPage> {
  GlobalKey<NavigatorState> _navigatorKey;
  AppPage _currentPage;

  CustomRouterDelegate() : _navigatorKey = GlobalKey<NavigatorState>() {
    //...
  }

  @override
  AppPage get currentConfiguration => _currentPage;

  //...

  @override
  GlobalKey<NavigatorState> get navigatorKey => _navigatorKey;

  @override
  Widget build(BuildContext context) {
    return Navigator(
      key: _navigatorKey,
      pages: [if (_currentPage == AppPage.home) Home(), else Detail()],
      onPopPage: (route, result) {
        if (!route.didPop(result)) return false;
        _currentPage = AppPage.home;
        notifyListeners();
        return true;
      },
    );
  }
}

class CustomRouteInformationParser extends RouteInformationParser<AppPage> {
  @override
  Future<AppPage> parseRouteInformation(RouteInformation routeInformation) async {
    switch (routeInformation.location) {
      case '/detail': return AppPage.detail;
      default: return AppPage.home;
    }
  }

  @override
  RouteInformation restoreRouteInformation(AppPage configuration) {
    switch (configuration) {
      case AppPage.detail: return RouteInformation(location: '/detail');
      default: return RouteInformation(location: '/');
    }
  }
}

현재 페이지 확인하는 방법

앱 내부에서 현재 페이지를 확인하려면 CustomRouterDelegate 클래스의 currentConfiguration 속성을 참조합니다:

final currentPageRoute = customRouterDelegate.currentConfiguration;

이 속성은 현재 페이지의 정보(AppPage enum 값)를 반환하며, 이를 통해 현재 페이지를 확인할 수 있습니다.

결론

이상으로 CustomRouterDelegate와 CustomRouteInformationParser를 활용하여 Flutter Navigator 2.0을 통해 현재 페이지를 확인하는 방법에 대해 알아보았습니다. 이 도구들은 페이지를 선언적으로 라우팅하고 관리하는 동시에 개발자만의 라우팅 로직을 구현할 수 있게 해주는 강력한 도구입니다.


0 개의 댓글:

Post a Comment