Dispositivos de pantalla grande

Esta página proporciona orientación sobre cómo optimizar tu aplicación para mejorar su comportamiento en pantallas grandes.

Flutter, al igual que Android, define pantallas grandes como tabletas, dispositivos plegables y dispositivos ChromeOS que ejecutan Android. Flutter también define los dispositivos de pantalla grande como web, escritorio e iPads.

Considera las siguientes capturas de pantalla de una aplicación. La aplicación muestra su UI en un ListView. La imagen de la izquierda muestra la aplicación ejecutándose en un dispositivo móvil. La imagen de la derecha muestra la aplicación ejecutándose en un dispositivo de pantalla grande antes de que se aplicara el consejo de esta página.

Esto no es óptimo.

Las Android Large Screen App Quality Guidelines y el equivalente para iOS dicen que ni el texto ni las cajas deben ocupar el ancho completo de la pantalla. ¿Cómo resolver esto de forma adaptativa?

Una solución común usa GridView, como se muestra en la siguiente sección.

Puedes usar el Widget GridView para transformar tu ListView existente en elementos de tamaño más razonable.

GridView es similar al Widget ListView, pero en lugar de manejar solo una lista de widgets organizados linealmente, GridView puede organizar widgets en una matriz bidimensional.

GridView también tiene constructores que son similares a ListView. El constructor predeterminado de ListView se mapea a GridView.count, y ListView.builder es similar a GridView.builder.

GridView tiene algunos constructores adicionales para layouts más personalizados. Para obtener más información, visita la página de la API de GridView.

Por ejemplo, si tu aplicación original usaba un ListView.builder, cámbialo por un GridView.builder. Si tu aplicación tiene una gran cantidad de elementos, se recomienda usar este constructor builder para construir solo los widgets de elementos que son realmente visibles.

La mayoría de los parámetros en el constructor son los mismos entre ambos widgets, por lo que es un cambio directo. Sin embargo, necesitas definir qué configurar para el gridDelegate.

Flutter proporciona gridDelegates predefinidos muy potentes que puedes usar, a saber:

SliverGridDelegateWithFixedCrossAxisCount

Te permite asignar un número específico de columnas a tu cuadrícula.

SliverGridDelegateWithMaxCrossAxisExtent

Te permite definir un ancho máximo de elemento.

Otra forma de abordar estas situaciones es usar la propiedad maxWidth de BoxConstraints. Esto implica lo siguiente:

• Envuelve el GridView en un ConstrainedBox y dale un BoxConstraints con un ancho máximo configurado.
• Usa un Container en lugar de un ConstrainedBox si deseas otra funcionalidad como configurar el color de fondo.

Para elegir el valor de ancho máximo, considera usar los valores recomendados por Material 3 en la guía Applying layout.

Como se mencionó anteriormente, tanto Android como Flutter recomiendan en sus guías de diseño no bloquear la orientación de la pantalla, pero algunas aplicaciones la bloquean de todos modos. Ten en cuenta que esto puede causar problemas al ejecutar tu aplicación en un dispositivo plegable.

Al ejecutarse en un dispositivo plegable, la aplicación puede verse bien cuando el dispositivo está plegado. Pero al desplegarlo, podrías encontrar la aplicación encuadrada con barras negras (letterboxed).

Como se describe en la página de SafeArea & MediaQuery, el letterboxing significa que la ventana de la aplicación se bloquea en el centro de la pantalla mientras la ventana está rodeada de negro.

¿Por qué puede pasar esto?

Esto puede suceder cuando usas MediaQuery para calcular el tamaño de la ventana para tu aplicación. Cuando el dispositivo está plegado, la orientación se restringe al modo vertical. Internamente, setPreferredOrientations hace que Android use un modo de compatibilidad vertical y la aplicación se muestre en un estado encuadrado con barras negras. En el estado encuadrado, MediaQuery nunca recibe el tamaño de ventana más grande que permite que la UI se expanda.

Puedes resolver esto de una de dos maneras:

• Admitir todas las orientaciones.
• Usa las dimensiones de la pantalla física. De hecho, esta es una de las pocas situaciones en las que usarías las dimensiones de la pantalla física y no las dimensiones de la ventana.

¿Cómo obtener las dimensiones físicas de la pantalla?

Puedes usar la API Display, que contiene el tamaño, la relación de aspecto de píxeles y la tasa de refresco del dispositivo físico.

El siguiente código de ejemplo obtiene un objeto Display:

/// AppState object.
ui.FlutterView? _view;
​
@override
void didChangeDependencies() {
  super.didChangeDependencies();
  _view = View.maybeOf(context);
}
​
void didChangeMetrics() {
  final ui.Display? display = _view?.display;
}

Lo importante es encontrar la pantalla de la vista que te interesa. Esto crea una API con vista al futuro que debería manejar dispositivos multipantalla y multivista actuales y futuros.

Agregar soporte para más pantallas también significa expandir los controles de entrada.

Las guías de Android describen tres niveles de soporte para dispositivos de gran formato.

El Nivel 3 (Tier 3), el nivel más bajo de soporte, incluye soporte para entrada con mouse y lápiz óptico (stylus) (guías de Material 3, guías de Apple).

Si tu aplicación usa Material 3 y sus botones y selectores, entonces tu aplicación ya tiene soporte integrado para varios estados de entrada adicionales.

¿Pero qué pasa si tienes un Widget personalizado? Consulta la página de User input para orientación sobre cómo agregar soporte de entrada para widgets.

La navegación puede crear desafíos únicos al trabajar con una variedad de dispositivos de diferentes tamaños. Generalmente, querrás alternar entre un BottomNavigationBar y un NavigationRail dependiendo del espacio de pantalla disponible.

Para obtener más información (y el código de ejemplo correspondiente), consulta Problem: Navigation rail, una sección en el artículo Developing Flutter apps for Large screens.