Flutter - Platform-specific behaviors and adaptations

Adaptation philosophy

Platform adaptiveness는 일반적으로 2가지 케이스가 있습니다.

1. OS 환경의 동작(텍스트 편집 및 스크롤 등)이며, 다른 동작이 발생하면 '잘못'이 됩니다.
2. OEM의 SDK를 사용하는 앱에서 일반적으로 구현되는 것(iOS의 병렬 탭 사용또는 Android에서 android.app.AlertDialog를 표시하는 것)

이 페이지는 안드로이드와 iOS에서 Flutter가 case 1에서 제공하는 automatic adaptations(자동 적응)에 대해 주로 다롭니다.

 

케이스 2에서, Flutter는 플랫폼 convention(규약)의 적절한 효과를 내기 위한 수단을 묶지만 앱 디자인 선택이 필요할 때 자동으로 적응하지 않습니다. For a discussion, see issue #8410 and the Material/Cupertino adaptive widget problem definition.

 

Android와 iOS에서 서로 다른 정보 아키텍쳐 구조를 사용하지만 동일한 콘텐츠 코드를 공유하는 앱의 예는 platform_design code samples에서 확인하세요.

Page navigation

Flutter는 Android와 iOS에서 볼 수 있는 네비게이션 패턴을 제공하고, 현재 플랫폼에 맞게 네비게이션 애니메이션을 맞춥니다.

Navigation transitions

Android에서, 디폴트로 Navigator.push() 트렌지션은 startActivity() 이후에 모델됩니다.

 

iOS에서:

• 디폴트 Navigator.push() API는 locale의 RTL 설정에 의존하는 end-to-start 애니메이션인 iOS Show/Push 스타일 트렌지션을 제공합니다. 새로운 라우트 뒤의 페이지도 iOS와 같은 방향으로 시차 슬라이딩 됩니다.
• 분리된 bottom-up 트렌지션은 푸쉬되는 페이지 라우트의 PageRoute.fullscreenDialog가 true 일 때 발생합니다. 이 트렌지션은 iOS의 Present/Modal 스타일 트렌지션을 나타내고, 주로 fullscreen modal 페이지에서 사용됩니다.

Platform-specific transition details

Android에서, 페이지 트렌지션 애니메이션 스타일은 OS 버젼에 따라 다릅니다.

• API 28 이전 버젼은 slides up and fades in인 bottom-up 애니메이션을 사용합니다.
• API 28과 이후 버젼은,  slides and clip-reveals up인 bottom-up 애니메이션을 사용합니다.

iOS에서 push 스타일 트렌지션이 사용되면, Flutter의 번들된 CupertinoNavigationBar and CupertinoSliverNavigationBar 네비게이션 바가 자동으로 각각의 서브 컴포넌트를 다음 혹은 이전 페이지에 대응되는 서브 컴포넌트의 CupertinoNavigationBar or CupertinoSliverNavigationBar로 애니메이트 합니다.

Back navigation

Android에서, OS 백 버튼은 디폴트로 Flutter로 전송되고 WidgetsApp의 Navigator의 상위 경로를 pop합니다.

 

iOS에서, edge swipe 제스쳐는 상위 경로를 pop하기 위해 사용 될 수 있습니다.

Scrolling

스크롤링은 플랫폼의 look과 feel에 매우 중요한 역할을 합니다. Flutter는 현재 플랫폼에 맞게 스크롤링을 조절합니다.

Physics simulation

Android와 iOS 둘다 말로 설명하기 힘든 복잡한 스크롤링 physics simulation 을 가지고 있습니다. 일반적으로, iOS의 스크롤은 더 큰 weight와 유동적인 저항이 있지만, Android는 더 고정적인 저항을 가지고 있습니다. 그러므로 iOS는 점진적으로 더 높은 속도를 가지지만 덜 갑작스럽게 멈추고 느린 속도에서 더 미끄러집니다.

Overscroll behavior

Android에서, 스크롤 가능한 모서리를 지나 스크롤하면 overscroll glow indicator을 보여줍니다.(현재 Material theme의 색을 기반으로)

 

iOS에서, 스크롤 가능한 모서리를 지나 스크롤하면 더 높은 저항으로 overscrolls하고 스냅백 됩니다.

Momentum

iOS에서, 같은 방향으로 반복적으로 flings(스크롤링)하는 것은 momentum을 스택하고 이어지는 fling에 대해 더 높은 속도를 적용합니다. Android에서는 동일한 기능이 없습니다.

Return to top

iOS에서, OS 상태바를 탭하면 기본 스크롤 컨트롤러를 맨위로 스크롤합니다. Android에서는 동일한 기능이 없습니다.

Typography

Material 패키지를 사용 할 때, 타이포그래피는 자동적으로 플랫폼에 적절한 font family로 설정됩니다. Android에서, Roboto font가 사용되고 iOS에서는 OS의 San Francisco font family가 사용됩니다.

 

Cupertino 패키지를 사용할 때, default theme는 항상 San Francisco font를 사용합니다.

 

San Francisco font 라이센스는 iOS, macOS, tvOS에서 작동하는 소프트웨어에만 제한됩니다. 그러므로 플랫폼이 iOS로 디버그-오버라이드되거나 기본 쿠퍼티노 테마가 사용되는 경우 안드로이드에서 실행될 때 폴백 글꼴이 사용됩니다.

Iconography

Material 패키지를 사용할 때, 특정 아이콘들은 플랫폼에 따라 자동적으로 다른 그래픽을 가집니다. 예를 들면, overflow 버튼의 3개의 점들은 iOS에서는 수평이지만 Android에서는 수직입니다. back 버튼은 iOS에서는 chevron이지만 Android에서는 stem/shaft 입니다.

Haptic feedback

Material, Cupertino 패키지는 자동적으로 특정 상황에 플랫폼에 적절한 haptic feedback을 발생시킵니다.

 

예를 들면, 텍스트 필드를 오래동안 눌러서 단어를 선택하면 Anroid에서는 'buzz'를 트리거하지만, iOS에서는 그러지 않습니다.

 

picker items으로 스크롤링하면, iOS에서는 'light impact' knock를 트리거하지만 Android에서는 아무 반응이 없습니다.

Text editing

Flutter는 텍스트 필드의 내용을 현재 플랫폼에 맞게 편집하는 동안 다음과 같이 조정합니다.

Keyboard gesture navigation

Android에서 소프트 키보드의 스페이스 바에서 수평 swipes를 수행하여 Material과 Cupertino 텍스트 필드에서 커서를 이동할 수 있습니다. 

 

3D Touch 기능이 있는 iOS 기기의 경우 소프트 키보드에서 force-press-drag 동작을 수행하여 커서를 2D로 이동할 수 있습니다.

Text selection toolbar

Android에서 Material을 사용 할 때, Android 스타일의 selection 툴바는 텍스트 필드에 텍스트 선택이 발생하면 표시됩니다.

 

iOS에서 Material, Cupertino를 사용할 때, iOS 스타일 selection 툴바는 텍스트 필드에서 텍스트 선택이 발생하면 표시됩니다.

Single tap gesture

Android에서 Material을 사용하면, 텍스트 필드의 단일 탭은 탭한 위치에 커서를 놓습니다.

 

Collapsed text selection은 이어서 커서를 움직이는 드래그 할 수 있는 핸들을 표시합니다.

 

iOS에서 Material나 Cupertino를 사용 할 때, 텍스트 필드에 입력된 단일탭은 탭된 단어의 가장 가까운 모서리로 커서를 놓습니다.

 

Collapsed text selection은 iOS에서 드래그 할 수 있는 핸들이 없습니다.

Long-press gesture

Material을 사용한 Android에서, long press는 long press한 단어를 선택합니다. 그리고 selection toolbar가 나타납니다.

 

Material을 사용한 iOS나 Cupertino를 사용하면, long press는 해당 위치에 커서를 둡니다. 그리고 selection toolbar가 나타납니다.

Double tap gesture

iOS, Android 모두, 더블탭은 해당 단어를 선택하고, selection toobar를 보여줍니다.