플러터 3.7.2 Navigation API 향상 기능: 사용법 및 옵션

Flutter 3.7.2 버전은 Navigation API에 여러 가지 향상 기능을 도입하여 개발자들이 보다 유연하고 효율적인 앱 내비게이션을 구현할 수 있도록 지원합니다.

이 블로그에서는 Flutter 3.7.2 버전에서 추가된 새로운 Navigation API 기능들을 자세히 살펴보고, 각 기능의 사용법과 옵션들을 설명합니다.

 

1. 새로운 라우터 위젯: PopUntil

 

PopUntil 라우터 위젯은 이전 라우터들을 한 번에 모두 제거하고 특정 라우터로 이동할 수 있는 새로운 기능입니다.

이전 버전에서는 Navigator.popUntil 메서드를 사용하여 이 기능을 구현해야 했지만, PopUntil 라우터 위젯을 사용하면 코드가 더 간결하고 명확해집니다.

 

사용법

PopUntil(
  routeName: '/targetScreen', // 이동할 라우터 이름
  predicate: (route) => route.name == '/previousScreen', // 제거할 라우터 조건
);

 

옵션

• predicate: 이전 라우터를 제거할지 여부를 결정하는 조건 함수입니다.
• inclusive: true인 경우 predicate 조건에 맞는 이전 라우터뿐만 아니라 현재 라우터도 제거합니다.

2. 향상된 라우터 전환

 

Flutter 3.7.2 버전에서는 go 메서드를 사용하여 라우터 전환 시 애니메이션 효과를 더욱 자유롭게 제어할 수 있습니다.

새로운 animation 속성을 통해 애니메이션 타입, 지속 시간, 커브 등을 설정할 수 있습니다.

 

사용법

Navigator.push(
  context,
  MaterialPageRoute(
    builder: (context) => MyTargetScreen(),
    animation: SlideTransition(
      position: const FractionalOffset(1.0, 0.0),
      duration: const Duration(milliseconds: 300),
      curve: Curves.easeInOut,
    ),
  ),
);

 

옵션

• animation: 라우터 전환 시 사용할 애니메이션 객체입니다.
• replace: true인 경우 현재 라우터를 새 라우터로 교체합니다.
• maintainState: true인 경우 현재 라우터의 상태를 유지합니다.

3. 새로운 라우터 이벤트

 

Flutter 3.7.2 버전에서는 라우터 전환과 관련된 다양한 이벤트를 처리할 수 있는 새로운 라우터 이벤트들이 추가되었습니다.

이를 통해 개발자들은 라우터 전환 과정에서 발생하는 이벤트를 더욱 효과적으로 처리할 수 있습니다.

 

사용법

Navigator.of(context).addListener((event) {
  if (event is RoutePopEvent) {
    // 이전 라우터가 제거될 때 발생하는 이벤트 처리
  } else if (event is RoutePushEvent) {
    // 새 라우터가 추가될 때 발생하는 이벤트 처리
  }
});

 

이벤트 종류

• RoutePopEvent: 이전 라우터가 제거될 때 발생하는 이벤트입니다.
• RoutePushEvent: 새 라우터가 추가될 때 발생하는 이벤트입니다.
• RouteReplaceEvent: 현재 라우터가 새 라우터로 교체될 때 발생하는 이벤트입니다.

4. 기타 개선 사항

• Navigator.pop 메서드에 result 인수를 추가하여 라우터 전환 시 결과 값을 전달할 수 있습니다.
• Navigator.pushNamed 메서드에 arguments 인수를 추가하여 라우터에 인수를 전달할 수 있습니다.
• Navigator.of 메서드를 사용하여 현재 컨텍스트와 관련된 Navigator 객체를 가져올 수 있습니다.

5. Flutter 3.7.2 Navigation API 향상 기능 활용 사례

 

Flutter 3.7.2 버전에서 추가된 Navigation API 향상 기능들을 활용하여 다음과 같은 다양한 기능들을 구현할 수 있습니다.

• 자동 화면 전환 애니메이션 설정: go 메서드의 animation 속성을 사용하여 라우터 전환 시 자동으로 재생되는 애니메이션 효과를 설정할 수 있습니다.
• 라우터 전환 시 이벤트 처리: 새로운 라우터 이벤트들을 사용하여 라우터 전환 과정에서 발생하는 이벤트를 처리하고 특정 작업을 수행할 수 있습니다.
• 라우터 전환 시 결과 값 전달: Navigator.pop 메서드의 result 인수를 사용하여 라우터 전환 시 다른 화면에서 사용할 수 있는 결과 값을 전달할 수 있습니다.
• 라우터에 인수 전달: Navigator.pushNamed 메서드의 arguments 인수를 사용하여 라우터에 다양한 데이터를 전달할 수 있습니다.
• 현재 컨텍스트와 관련된 Navigator 객체 가져오기: Navigator.of 메서드를 사용하여 현재 컨텍스트와 관련된 Navigator 객체를 가져와 라우터 작업을 수행할 수 있습니다.

6. 결론

 

Flutter 3.7.2 버전의 Navigation API 향상 기능들은 개발자들이 보다 유연하고 효율적인 앱 내비게이션을 구현할 수 있도록 지원하며, 앱 개발의 생산성을 높이고 사용자 경험을 향상시키는 데 도움이 될 것입니다.

 

이 블로그가 Flutter 3.7.2 버전의 Navigation API 향상 기능에 대한 이해를 돕고, 실제 앱 개발에 활용하는 데 도움이 되었기를 바랍니다.

 

궁금한 점이 있으면 언제든지 질문해주세요.

 

 

수발가족을 위한 일기장 “나비일기장”

 

https://play.google.com/store/apps/details?id=com.maccrey.navi_diary_release

 

구글플레이 앱 배포의 시작! 비공개테스트 20명의 테스터모집을 위한 앱 "테스터 쉐어"

 

https://play.google.com/store/apps/details?id=com.maccrey.tester_share_release

Tester Share [테스터쉐어] - Google Play 앱

카카오톡 오픈 채팅방

https://open.kakao.com/o/gsS8Jbzg