En esta ocasión vamos a hablar respecto a uno de los widget más importantes del repertorio de Flutter. Este fue el primer widget que se presentó en el canal oficial de Flutter en YouTube, en su lista de reproducción «Widget of the Week«. Al ser el sitio oficial de Flutter, está en inglés, pero no te preocupes, aquí te lo explico yo en español.
SafeArea es un widget de servicio, es decir que no tiene presencia visual, o mejor dicho, el usuario no puede observarlo. El servicio que ofrece este widget es tan útil que yo lo utilizo en prácticamente todos mis proyectos. Podríamos decir que es uno de mis consentidos.
¿Cuál es la función de Flutter Safe Area?
Cuando trabajamos con Flutter lo hacemos (en la mayoría de los casos) porque vamos a programar para varias plataformas, para Android y para iOS. Tenemos que ser consientes de que esto implica un importante detalle, nuestra aplicación será usada en múltiples dispositivos que son muy diferentes en tamaño y forma. Un ejemplo claro es el uso reciente de los llamados «notch» esa pequeña protuberancia en el borde superior que entra a la pantalla y divide la barra de notificaciones en 2 partes.
Podría interesarte: 5 Razones ¿Por qué aprender Flutter este 2020?
Cuando programamos y tenemos una AppBar o barra de título personalizada, sin duda este «notch» va a estorbar y parte de la barra de título no se mostrará. Y como estos hay muchos otros casos. Es aquí cuando entra en juego nuestro querido widget SafeArea. Usándolo nos podemos despreocupar de todos estos detalles, solo usamos el widget y él se encargará de colocar nuestro contenido de tal forma que se muestre completo y bien. Hace que el contenido se muestre en la zona segura de la pantalla de cualquier dispositivo que la aplicación funcione.
Como usar este widget
El uso de este widget es relativamente sencillo. Lo único que debemos hacer es envolver el contenido con el widget SafeArea( … contenido … ). Usualmente se utiliza para encerrar el body dentro del Scaffold( ) principal de nuestra aplicación para que toda nuestra aplicación se muestre en un lugar seguro y no quede un cuadro de dialogo que no se muestre correctamente.
@override
Widget build (BuildContext context){
return Scaffold(
body: SafeArea(
child: Content( ... ) // Aquí seguimos agregando todos los widget de nuestra App
)
)
}
Este es el uso más clásico de este widget, es la forma más fácil de usarlo y funciona perfectamente bien. Lo pones y te despreocupas por asuntos de compatibilidad con pantallas de dispositivos extraños.
Otros detalles
Algo que no suele usarse mucho pero que es bueno saberlo es que podemos decidir que zonas queremos proteger con nuestro SafeArea y cuales no. Es decir, si queremos que el SafeArea únicamente solucione los problemas de compatibilidad en la parte superior de la pantalla, podemos especificarlo de la siguiente manera:
SafeArea(
child: Content( ... ),
top: true,
bottom: false,
left: true,
right: true,
)
En este caso estamos activando la protección para todos los lados, excepto para el inferior. Al poner la instrucción bottom: false estamos deshabilitando la protección del widget para la parte inferior, si hacemos esto debemos especificar los otros lados en true para que funcione correctamente la protección de los otros bordes.
Espero que este artículo te haya servido. Si tienes alguna duda puedes dejarlo en los comentarios y con todo gusto contestaré para ayudarte. Un abrazo y hasta la próxima.