Navigation transitions

The default Navigator.push() API produces an
iOS Show/Push style transition that 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.

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.

Android Pre-P

Android Post-P

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.

Android back button

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.

Soft fling comparison

Medium fling comparison

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.

Dynamic overscroll comparison

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.

iOS scroll momentum

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.

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 on Android

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 three 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.

Haptic feedback

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.

Android space key cursor move

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 text selection 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.

Android tap

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 press. The selection toolbar is shown upon release.

Android long press

iOS long press

Long-press drag gesture

With Material on Android,
dragging while holding the long press expands the words selected.

With Material on iOS or when using Cupertino,
dragging while holding the long press moves the cursor.

Android long press drag

iOS long press drag

Double tap gesture

On both Android and iOS,
a double tap selects the word receiving the
double tap and shows the selection toolbar.