SafeArea & MediaQuery

Esta página analiza cómo y cuándo utilizar los widgets SafeArea y MediaQuery.

Al ejecutar tu aplicación en los dispositivos más recientes, es posible que encuentres partes de la UI bloqueadas por recortes en la pantalla del dispositivo. Puedes solucionar esto con el widget SafeArea, que aplica un margen interno a su widget hijo para evitar intromisiones (como notches y recortes para cámaras), así como la UI del sistema operativo (como la barra de estado en Android), o por las esquinas redondeadas de la pantalla física.

Si no quieres este comportamiento, el widget SafeArea te permite desactivar el relleno (padding) en cualquiera de sus cuatro lados. Por defecto, los cuatro lados están habilitados.

Por lo general, se recomienda envolver el cuerpo de un widget Scaffold en SafeArea como un buen punto de partida, pero no siempre necesitas colocarlo tan arriba en el árbol de Widgets.

Por ejemplo, si deseas intencionadamente que tu aplicación se extienda debajo de los recortes, puedes mover el SafeArea para envolver el contenido que tenga sentido, y dejar que el resto de la aplicación ocupe la pantalla completa.

Usar SafeArea garantiza que el contenido de tu aplicación no se corte debido a características físicas de la pantalla o a la UI del sistema operativo, y prepara tu aplicación para el éxito incluso cuando lleguen al mercado nuevos dispositivos con diferentes formas y estilos de recortes.

¿Cómo logra SafeArea tanto con tan poco código? Detrás de escena utiliza el objeto MediaQuery.

Como se mencionó en la sección SafeArea, MediaQuery es un widget potente para crear aplicaciones adaptativas. A veces usarás MediaQuery directamente, y a veces usarás SafeArea, que utiliza MediaQuery detrás de escena.

MediaQuery proporciona muchísima información, incluyendo el tamaño actual de la ventana de la aplicación. Expone configuraciones de accesibilidad como el modo de alto contraste y el escalado de texto, o si el usuario está usando un servicio de accesibilidad como TalkBack o VoiceOver. MediaQuery también contiene información sobre las características de la pantalla de tu dispositivo, como si tiene una bisagra o un pliegue.

SafeArea utiliza los datos de MediaQuery para calcular cuánto margen aplicar a su Widget hijo. Específicamente, utiliza la propiedad padding de MediaQuery, que es básicamente la cantidad de pantalla que está parcialmente oscurecida por la UI del sistema, notches de pantalla o la barra de estado.

Entonces, ¿por qué no usar MediaQuery directamente?

La respuesta es que SafeArea hace una cosa ingeniosa que hace que sea beneficioso usarlo en lugar de solo utilizar MediaQueryData directamente. Específicamente, modifica el MediaQuery expuesto a los hijos de SafeArea para hacer parecer que el relleno (padding) añadido a SafeArea no existe. Esto significa que puedes anidar SafeAreas, y solo el superior aplicará el relleno necesario para evitar los notches como UI del sistema.

A medida que tu aplicación crece y mueves widgets, no tienes que preocuparte por aplicar demasiado relleno si tienes múltiples SafeAreas, mientras que sí tendrías problemas si usaras MediaQueryData.padding directamente.

Puedes envolver el cuerpo de un widget Scaffold con un SafeArea, pero no tienes por qué colocarlo tan arriba en el árbol de widgets. El SafeArea solo necesita envolver los contenidos que causarían pérdida de información si fueran cortados por las características de hardware mencionadas anteriormente.

Por ejemplo, si deseas intencionadamente que tu aplicación se extienda debajo de los recortes, puedes mover el SafeArea para envolver el contenido que tenga sentido, y dejar que el resto de la aplicación ocupe la pantalla completa. Una nota al margen es que esto es lo que hace el widget AppBar por defecto, que es como pasa por debajo de la barra de estado del sistema. Esta es también la razón por la que se recomienda envolver el cuerpo de un Scaffold en un SafeArea, en lugar de envolver todo el Scaffold en sí.

SafeArea garantiza que el contenido de tu aplicación no se corte de forma genérica y prepara tu aplicación para el éxito incluso cuando lleguen al mercado nuevos dispositivos con diferentes formas y estilos de recortes.