Enfoque general para aplicaciones adaptativas

Entonces, ¿cómo abordas el tomar una aplicación diseñada para dispositivos móviles convencionales, y hacerla hermosa en una amplia gama de dispositivos? ¿Qué pasos se requieren?

Los ingenieros de Google, que tienen experiencia haciendo esta misma labor para aplicaciones grandes, recomiendan el siguiente enfoque de 3 pasos.

Primero, identifica los Widgets que planeas hacer dinámicos. Analiza los constructores de esos Widgets y abstrae los datos que puedes compartir.

Los widgets comunes que requieren adaptabilidad son:

• Diálogos, tanto a pantalla completa como modales
• UI de navegación, tanto rail como barra inferior
• Layout personalizado, como "¿el área de la UI es más alta o más ancha?"

Por ejemplo, en un Widget Dialog, puedes compartir la información que contiene el content del diálogo.

O bien, tal vez quieras alternar entre un NavigationBar cuando la ventana de la aplicación es pequeña, y un NavigationRail cuando la ventana de la aplicación es grande. Estos Widgets probablemente compartirían una lista de destinos navegables. En este caso, podrías crear un Widget Destination para contener esta información, y especificar que el Destination tiene tanto un icono como una etiqueta de texto.

A continuación, evaluarás el tamaño de tu pantalla para decidir cómo mostrar tu UI.

Tienes dos formas de determinar el tamaño de tu área de visualización: MediaQuery y LayoutBuilder.

En el pasado, podrías haber usado MediaQuery.of para determinar el tamaño de la pantalla del dispositivo. Sin embargo, los dispositivos hoy en día cuentan con pantallas con una gran variedad de tamaños y formas, y esta prueba puede resultar engañosa.

Por ejemplo, tal vez tu aplicación actualmente ocupa una ventana pequeña en una pantalla grande. Si usas el método MediaQuery.of y concluyes que la pantalla es pequeña (cuando, de hecho, la aplicación se muestra en una ventana diminuta en una pantalla grande), y has bloqueado la orientación vertical de tu aplicación, provocará que la ventana de la aplicación se bloquee en el centro de la pantalla, rodeada de negro. Esto difícilmente es una UI ideal en una pantalla grande.

Ten en cuenta que MediaQuery.sizeOf devuelve el tamaño actual de toda la pantalla de la aplicación y no solo de un solo Widget.

Tienes dos formas de medir el espacio de tu pantalla. Puedes usar MediaQuery.sizeOf o LayoutBuilder, dependiendo de si quieres el tamaño de toda la ventana de la aplicación, o un dimensionamiento más local.

Si quieres que tu Widget sea a pantalla completa, incluso cuando la ventana de la aplicación es pequeña, usa MediaQuery.sizeOf para poder elegir la UI en función del tamaño de la propia ventana de la aplicación. En la sección anterior, quieres basar el comportamiento de dimensionamiento en toda la ventana de la aplicación, por lo que usarías MediaQuery.sizeOf.

Solicitar el tamaño de la ventana de la aplicación desde dentro del método build, como en MediaQuery.sizeOf(context), hace que el BuildContext dado se vuelva a construir cada vez que cambia la propiedad size.

LayoutBuilder logra un objetivo similar a MediaQuery.sizeOf, con algunas diferencias.

En lugar de proporcionar el tamaño de la ventana de la aplicación, LayoutBuilder proporciona las restricciones de layout del Widget padre. Esto significa que obtienes información de dimensionamiento basada en el punto específico del árbol de widgets donde agregaste el LayoutBuilder. Además, LayoutBuilder devuelve un objeto BoxConstraints en lugar de un objeto Size, por lo que se te dan los rangos válidos de ancho y alto (mínimo y máximo) para el contenido, en lugar de solo un tamaño fijo. Esto puede ser útil para Widgets personalizados.

Por ejemplo, imagina un Widget personalizado donde quieres que el dimensionamiento se base en el espacio otorgado específicamente a ese Widget, y no en la ventana de la aplicación en general. En este escenario, usa LayoutBuilder.

En este punto, debes decidir qué puntos de interrupción (breakpoints) de dimensionamiento usar al elegir qué versión de la UI mostrar. Por ejemplo, las guías de Material layout sugieren usar una barra de navegación inferior para ventanas de menos de 600 píxeles lógicos de ancho, y un rail de navegación para aquellas que tienen 600 píxeles de ancho o más. De nuevo, tu elección no debería depender del tipo de dispositivo, sino del tamaño de ventana disponible en el dispositivo.

Para revisar un ejemplo que alterna entre un NavigationRail y un NavigationBar, consulta Building an animated responsive app layout with Material 3.

La siguiente página analiza cómo garantizar que tu aplicación se vea lo mejor posible en pantallas grandes y dispositivos plegables.