Comportamientos y adaptaciones específicas de plataforma

Filosofía de adaptación

Hay de forma general 2 casos de adaptabilidad a la plataforma:

  1. Cosas que tienen un comportamiento específico en el entorno del Sistema Operativo (como es la edición de texto y el scroll) y sería ‘incorrecto’ si tuviera un comportamiento diferente.
  2. Cosas que se implementan convencionalmente en apps que usa el OEM SDK (como es usar pestañas paralelas en iOS o mostrar un android.app.AlertDialog en Android).

Este artículo cubre las adaptaciones automáticas proporcionadas por Flutter en el caso 1 en Android e iOS.

Para el caso 2, Flutter empaqueta los medios para producir el efecto apropiado de las convenciones de la plataforma pero no hace las adpataciones de forma automática por lo que se necesita una decisión de diseño. Para una discusion sobre esto, mira #8410.

Flutter proporciona los patrones de navegación vistos en Android e iOS y tambien adapta automáticamnte las animaciones de navegación a la plataforma correspondiente.

Transiciones de Navegación

En Android, la transición Navigator.push por defecto es modelada despues de startActivity(), que generalmente tiene una variante de animación de abajo hacia arriba.

En iOS:

  • La API Navigator.push API produce una transición Show/Push estilo iOS que se anima de principio a inicio dependiendo de la configuración RTL local. La página por debajo de la nueva ruta tambien se desliza con parallax en la misma dirección que en iOS.
  • Una transición separada de estilo abajo-arriba sucede cuando se hace push de una página de una ruta cuando PageRoute.fullscreenDialog es true. Esto representa el estilo de transición Present/Modal de iOS y es usado típicamente en páginas modales a pantalla completa.
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

Detalles de transición específicos de plataforma

En Android, existen 2 estilos de animación para la transición entre páginas dependiendo de tu version de SO:

En iOS cuando la transición estilo push es usada, en el paquete de Flutter, CupertinoNavigationBar y CupertinoSliverNavigationBar animan automáticamente cada subcomponente a su correspondiente subcomponente en las páginas siguiente o previas de CupertinoNavigationBar o 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

En Android, el botón atrás del SO, por defecto, es expedido a Flutter y se hace pop de la ruta superior del Navigator de WidgetsApp.

En iOS, un gesto de deslizar desde el borde puede ser usado para hacer pop de la ruta superior.

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

Hacer scroll

Hacer scroll es una parte importante del look and feel de la plataforma, y Flutter ajusta automáticamente el comportamiento del scroll para ajustarse a la plataforma actual.

Simulación física

Tanto Android como iOS tienen una simulación físcica del scroll que son difíciles de describer verbalmente. Generalmente, el scroll en iOS tiene más peso y fricción dinámica sin embargo Android tiene una fricción más estática. Por lo tanto, iOS gana velocidad más gradualmente pero se detiene menos bruscamente y es más resbaladizo a velocidades lentas.

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

Comportamiento en el límite del scroll

En Android, hacer scroll más alla del limite de una área scrollable muestra un overscroll glow indicator (basado en el color del theme Material actual).

En iOS, hacer scoll más alla del límite de un área scrollable provoca overscroll con una resistencia creciente y vuelve atrás.

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

Momento

En iOS, repetidos deslizamientos en la misma dirección acumulan el momento y genera más velocidad en cada deslizamiento. No hay un comportamiento equivalente en Android.

Repeated scroll flings building momentum on iOS
iOS scroll momentum

Volver arriba

En iOS, tocando la barra de estado del SO provoca que el controlador de scroll principal haga scroll hacia la posición superior. No hay un compartamiento equivalente en Android.

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

Tipografía

Cuando se usa el paquete Material, la tipografía se configura por defecto automáticamente a la familia de fuente apropiada para la plataforma. En Android, se usa la fuente Roboto. En iOS, se usa la familia de fuente del SO San Francisco.

Cuando se usa el paquete Cupertino, el theme por defecto siempre usa la fuente San Francisco.

La licencia de la fuente San Francisco limita su uso únicamente al software que se ejecuta en iOS, macOS, o tvOS. Por lo tanto una fuente sustitutiva es usada cuando se ejecuta en Android si la plataforma esta sobreescrita en el modo depuración o si se usa el theme Cupertino por defecto.

Roboto font on Android
Roboto on Android
San Francisco font on iOS
San Francisco on iOS

Iconografía

Cuando se usa el paquete Material, ciertos iconos se muestran diferentes gráficos automáticamente dependiendo de la plataforma. Por ejemplo, los 3 puntos del botón overflow son verticales en iOS y horizontales en Android. El botón atras es un simple ángulo en iOS y una flecha en Android.

Android appropriate icons
Icons on Android
iOS appropriate icons
Icons on iOS

Feedback háptico

Los paquetes Material y Cupertino desencadenan el apropiado feedback háptico en ciertos escenarios.

Por ejemplo, una selección de palabras mediante una pulsación larga en un campo de texto desencadena una vibración en Android pero no en iOS.

Hacer scroll a través de los elementos de un selector desencadena un ‘ligero golpe de impacto’ pero ningún feedback en Android.

Edición de texto

Flutter tambien realiza las siguientes adaptaciones mientras se edita el contenido de un campo de texto para coincidir con la plataforma actual.

Gestos de navegación en el teclado

En Android, se pueden realizar deslizamientos horizontales en la barra espaciadora del teclado de software para mover el cursor en los campos de texto Material y Cupertino.

En iOS los dispositivos con capacidades 3D Touch, un gesto de apretar y arrastrar, puede hacerse en el teclado de software para mover el cursos en 2D mediante un cursor flotante. Esto funciona tanto en los campos de texto Material como Cupertino.

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

Barra de herramientas de selección de texto

Con Material en Android, la barra de herramientas de selección de estilo Android se muestra cuando se hace una selección de texto en un campo de texto.

Con Material en iOS o cuando se usa Cupertino, la barra de herramientas de selección de estilo iOS se muestra cuando se hace una selección de texto en un campo de texto.

Android appropriate text toolbar
Android text selection toolbar
iOS appropriate text toolbar
iOS text selection toolbar

Gesto tap simple

Con Material en Android, un tap simple en un campo de texto coloca el cursor en la localización del tap.

Una selección de texto también muestra un icono arrastrable para poder mover el cursor.

Con Material en iOS o cuando se usa Cupertino, un tap simple en un campo de texto coloca el cursos cerca del limte de la palabra pulsada.

Las selecciones de texto no tienen un icono arrastrable en 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

Gesto long-press

Con Material en Android, un gesto long press selecciona la palabra bajo el gesto long press. La barra de herramientas de selección se muestra cuando se suelta.

Con Material en iOS o cuando se usa Cupertino, un gesto long press coloca el cursor en la localización del gesto long pres. La barra de herramientas de selección se muestra cuando se suelta.

Selecting a word via long press on Android
Android long press
Selecting a position via long press on iOS
iOS long press

Gesto Long-press drag

Con Material en Android, arrastrar mientras se mantiene la presión larga expande las palabras seleccionadas.

Con Material en iOS o cuando se usa Cupertino, arrastrar mientras se mantiene la presión larga mueve el cursor.

Expanding word selection via long press drag on Android
Android long press drag
Moving the cursor via long press drag on iOS
iOS long press drag

Gesto doble tap

Tanto en Android como en iOS, un doble tap selecciona la palabra que recibe el doble tap y muestra la barra de herramientas de selección.

Selecting a word via double tap on Android
Android double tap
Selecting a word via double tap on iOS
iOS double tap