평생 공부만 해야할듯

Flutter로 iOS, AOS 테스트를 하다보면 화면 전환 효과가 다르죠.

iOS는 CupertinoPageRoute와 같이 옆으로 화면이 전환되고, 뒤로가기 swipe를 하면 pop이 되는 구조 입니다.

하지만 AOS는 MaterialPageRoute와 같이 가운데화 화면이 채워지는 효과가 있죠.

AOS도 iOS처럼 화면 전환효과를 동일하게 하고 싶을때에는 CupertinoPageRoute로 바꿔서 Navigate를 하곤 했는데... 언제 다 수정하지..

하지만 역시 Flutter는 이러한 부분을 알기라도 하듯이 사용자에 의해 설정을 변경할 수 있도록 제공하고 있습니다.

# ThemeData

ThemeData로 테마 설정을 하는데 pageTransitionsTheme이라는 속성이 존재 합니다.

https://api.flutter.dev/flutter/material/PageTransitionsTheme-class.html

MaterialPageRouter에서 사용하는 전환 효과를 설정하는 정의하는데요.

Default로 iOS이면 CupertionPageTransitionBuilder, AOS이면 ZoomPageTransitionsBuilder를 사용하고 있습니다.

class PageTransitionsTheme with Diagnosticable {
  ...
  
  const PageTransitionsTheme({ Map<TargetPlatform, PageTransitionsBuilder> builders = _defaultBuilders }) : _builders = builders;

  static const Map<TargetPlatform, PageTransitionsBuilder> _defaultBuilders = <TargetPlatform, PageTransitionsBuilder>{
    TargetPlatform.android: ZoomPageTransitionsBuilder(),
    TargetPlatform.iOS: CupertinoPageTransitionsBuilder(),
    TargetPlatform.macOS: CupertinoPageTransitionsBuilder(),
  };
  
  ...
}

# TransitionsBuilder 변경

위 처럼 기본값이 ZoomPageTransitionsBuilder로 지정되어 있으니 ThemeData에서 아래처럼 변경해주겠습니다.

TargetPlatform의 android일때 iOS의 CupertinoPageTransitionsBuilder를 제공함으로써 iOS와 동일한 Transition효과를 기대할 수 있겠습니다.

pageTransitionsTheme: const PageTransitionsTheme(
  builders: {
    TargetPlatform.android: CupertinoPageTransitionsBuilder(),
  }
),

이제 Android 일때에도 MaterialRoutePage만 사용해도 CupertinoRoutePage의 Transition효과를 얻을 수 있습니다.

크로스 플랫폼이기에 화면 전환까지 동일하게 변경했더니 AOS 특유의 버벅임이 줄어든 느낌이 들어서 좋은것 같습니다.

* 위 설정은 go_router에서도 동일하게 적용됩니다.