文章来源于网络收集而来，版权归原创者所有，如有侵权请及时联系！

Platform specific behaviors and adaptations

发布于 2019-12-09 21:31:25 字数 20032 浏览 854 评论 0 收藏 0

Adaptation philosophy

There are generally 2 cases of platform adaptiveness:

Things that are behaviors of the OS environment (such as text editing and scrolling) and that would be ‘wrong’ if a different behavior took place.
Things that are conventionally implemented in apps using the OEM’s SDKs (such as using parallel tabs on iOS or showing an android.app.AlertDialog on Android).

This article mainly covers the automatic adaptations provided by Flutter in case 1 on Android and iOS.

For case 2, Flutter bundles the means to produce the appropriate effects of the platform conventions but does not adapt automatically when app design choices are needed. For a discussion, see #8410.

Page navigation

Flutter provides the navigation patterns seen on Android and iOS and also automatically adapts the navigation animation to the current platform.

Navigation transitions

On Android, the default Navigator.push transition is modeled after startActivity(), which generally has one bottom-up animation variant.

On iOS:

The default Navigator.push API produces an iOS Show/Push style transition which animates from end-to-start depending on the locale’s RTL setting. The page behind the new route also parallax-slides in the same direction as in iOS.
A separate bottom-up transition style exists when pushing a page route where PageRoute.fullscreenDialog is true. This represents iOS’s Present/Modal style transition and is typically used on fullscreen modal pages.

An animation of the bottom-up page transition on Android — Android page transition

An animation of the end-start style push page transition on iOS — iOS push transition

An animation of the bottom-up style present page transition on iOS — iOS present transition

Platform-specific transition details

On Android, 2 page transition animation styles exist depending on your OS version:

Pre API 28 uses a bottom-up animation that slides up and fades in.
On API 28 and later, the bottom-up animation slides and clip-reveals up.

On iOS when the push style transition is used, Flutter’s bundled CupertinoNavigationBar and CupertinoSliverNavigationBar nav bars automatically animate each subcomponent to its corresponding subcomponent on the next or previous page’s CupertinoNavigationBar or CupertinoSliverNavigationBar.

An animation of the page transition on Android pre-Android P — Android Pre-P

An animation of the page transition on Android on Android P — Android Post-P

An animation of the nav bar transitions during a page transition on iOS — iOS Nav Bar

Back navigation

On Android, the OS back button, by default, is sent to Flutter and pops the top route of the WidgetsApp’s Navigator.

On iOS, an edge swipe gesture can be used to pop the top route.

A page transition triggered by the Android back button — Android back button

A page transition triggered by an iOS back swipe gesture — iOS back swipe gesture

Scrolling

Scrolling is an important part of the platform’s look and feel, and Flutter automatically adjusts the scrolling behavior to match the current platform.

Physics simulation

Android and iOS both have complex scrolling physics simulations that are difficult to describe verbally. Generally, iOS’s scrollable has more weight and dynamic friction but Android has more static friction. Therefore iOS gains high speed more gradually but stops less abruptly and is more slippery at slow speeds.

A soft fling where the iOS scrollable slid longer at lower speed than Android — Soft fling comparison

A medium force fling where the Android scrollable reached speed faster and stopped more abruptly after reaching a longer distance — Medium fling comparison

A strong fling where the Android scrollable reach speed faster and reached significantly more distance — Strong fling comparison

Overscroll behavior

On Android, scrolling past the edge of a scrollable shows an overscroll glow indicator (based on the color of the current Material theme).

On iOS, scrolling past the edge of a scrollable overscrolls with increasing resistance and snaps back.

Android and iOS scrollables being flung past their edge and exhibiting platform specific overscroll behavior — Dynamic overscroll comparison

Android and iOS scrollables being overscrolled from a resting position and exhibiting platform specific overscroll behavior — Static overscroll comparison

Momentum

On iOS, repeated flings in the same direction stacks momentum and builds more speed with each successive fling. There is no equivalent behavior on Android.

Return to top

On iOS, tapping the OS status bar scrolls the primary scroll controller to the top position. There is no equivalent behavior on Android.

Tapping the status bar scrolls the primary scrollable back to the top — iOS status bar tap to top

Typography

When using the Material package, the typography automatically defaults to the font family appropriate for the platform. On Android, the Roboto font is used. On iOS, the OS’s San Francisco font family is used.

When using the Cupertino package, the default theme always uses the San Francisco font.

The San Francisco font license limits its usage to software running on iOS, macOS, or tvOS only. Therefore a fallback font is used when running on Android if the platform is debug-overridden to iOS or the default Cupertino theme is used.

Roboto font on Android — Roboto on Android

San Francisco font on iOS — San Francisco on iOS

Iconography

When using the Material package, certain icons automatically show different graphics depending on the platform. For instance, the overflow button’s 3 dots are vertical on iOS and horizontal on Android. The back button is a simple chevron on iOS and has a stem/shaft on Android.

Android appropriate icons — Icons on Android

Haptic feedback

The Material and Cupertino packages automatically trigger the platform appropriate haptic feedback in certain scenarios.

For instance, a word selection via text field long-press triggers a ‘buzz’ vibrate on Android and not on iOS.

Scrolling through picker items on iOS triggers a ‘light impact’ knock and no feedback on Android.

Text editing

Flutter also makes the below adaptations while editing the content of text fields to match the current platform.

Keyboard gesture navigation

On Android, horizontal swipes can be made on the soft keyboard’s spacebar to move the cursor in Material and Cupertino text fields.

On iOS devices with 3D Touch capabilities, a force-press-drag gesture, could be made on the soft keyboard to move the cursor in 2D via a floating cursor. This works on both Material and Cupertino text fields.

Moving the cursor via the space key on Android — Android space key cursor move

Moving the cursor via 3D Touch drag on the keyboard on iOS — iOS 3D Touch drag cursor move

Text selection toolbar

With Material on Android, the Android style selection toolbar is shown when a text selection is made in a text field.

With Material on iOS or when using Cupertino, the iOS style selection toolbar is shown when a text selection is made in a text field.

Android appropriate text toolbar — Android text selection toolbar

iOS appropriate text toolbar — iOS text selection toolbar

Single tap gesture

With Material on Android, a single tap in a text field puts the cursor at the location of the tap.

A collapsed text selection also shows a draggable handle to subsequently move the cursor.

With Material on iOS or when using Cupertino, a single tap in a text field puts the cursor at the nearest edge of the word tapped.

Collapsed text selections don’t have draggable handles on iOS.

Moving the cursor to the tapped position on Android — Android tap

Moving the cursor to the nearest edge of the tapped word on iOS — iOS tap

Long-press gesture

With Material on Android, a long press selects the word under the long press. The selection toolbar is shown upon release.

With Material on iOS or when using Cupertino, a long press places the cursor at the location of the long pres. The selection toolbar is shown upon release.