SafeArea en Flutter

SafeArea es un widget importante y útil en Flutter que hace que la interfaz de usuario sea dinámica y se adapte a una amplia variedad de dispositivos. Mientras diseñamos el diseño de los widgets, consideramos diferentes tipos de dispositivos y sus limitaciones de pantalla preocupadas como barra de estado, muescas, barra de navegación, etc. Pero se están lanzando nuevos dispositivos con diferentes diseños y en ciertos escenarios, su aplicación podría superponerse cualquiera de esas limitaciones preocupantes. Entonces, para que nuestra interfaz de usuario se adapte y esté libre de errores, usamos el widget SafeArea .

En palabras simples, SafeArea es básicamente un widget de relleno, que agrega el relleno necesario a su aplicación, según el dispositivo en el que se ejecuta. Si los widgets de su aplicación se superponen a cualquiera de las funciones del sistema, como muescas, barra de estado, agujeros de cámara o cualquier otra función similar, entonces SafeArea agregará relleno alrededor de la aplicación, según sea necesario.

Internamente , SafeArea usa MediaQuery para verificar las dimensiones de la pantalla e incluye relleno adicional si es necesario.

const SafeArea({
   Key key,
   bool left: true,
   bool top: true,
   bool right: true,
   bool bottom: true,
   EdgeInsets minimum: EdgeInsets.zero,
   bool maintainBottomViewPadding: false,
   @required Widget child}
)

Arriba se muestra el constructor de SafeArea. Puede decidir si desea evitar intrusiones en una dirección particular cambiando el valor booleano a verdadero o falso.

Por ejemplo, desea usar SafeArea solo en las direcciones superior e inferior, luego puede especificarlo de la siguiente manera.

SafeArea(
    left: false,
    top: true,
    bottom: true,
    right: false,
    child: Text('Your Widget')
)

El código anterior agregaría relleno solo en la parte superior e inferior, mientras que otras direcciones (izquierda y derecha) no se verían afectadas. Si no especifica ninguna dirección, el valor predeterminado será verdadero para todas las direcciones.

Si desea agregar un relleno mínimo en cualquiera de las direcciones, puede hacerlo de la siguiente manera:  

SafeArea(
   minimum: const EdgeInsets.all(15.0),
   child: Text('Your Widget'),
)

En el fragmento de código anterior, estamos especificando el relleno mínimo que necesitamos agregar en todas las direcciones. Si no especificas esto, Flutter calculará automáticamente el relleno requerido para todas las direcciones.

• bottom : Esta propiedad es de tipo bool. Es verdadero de forma predeterminada y establecerlo en falso impediría que SafeArea agregue relleno en la parte inferior de la pantalla.
• top : esta propiedad también es de tipo bool y establecerla en false evitaría el relleno en la parte superior de la pantalla.
• left : esta propiedad es de tipo bool y establecerla en false evitaría el relleno en el lado izquierdo de la pantalla.
• right : esta propiedad es de tipo bool y establecerla en false evitaría el relleno en el lado derecho de la pantalla.
• mínimo: esta propiedad es de tipo EdgeInsets . Puede especificar el relleno mínimo que se agregará usando esta propiedad.
• keepBottomViewPadding : esta propiedad es de tipo bool y especifica si SafeArea debe mantener viewPadding en lugar de padding. Por ejemplo, si está utilizando un teclado en pantalla con SafeArea , el relleno puede mantenerse debajo de la obstrucción en lugar de consumirse.

Ahora veremos cómo funcionan las propiedades mencionadas anteriormente y cuándo usarlas.

Supongamos que está mostrando un widget de texto o cualquier otro widget en el extremo inferior de la pantalla, luego en su dispositivo podría funcionar, pero en otros dispositivos, es posible que no esté formateado correctamente.

Consulte la siguiente captura de pantalla para verificar el escenario mencionado anteriormente.

Puede ver que en la aplicación anterior, el widget de texto no tiene el formato correcto. El dispositivo que se muestra arriba tiene forma rectangular, pero si prueba la misma aplicación en un dispositivo iOS, es posible que el texto cubra el cajón de la aplicación. Como desarrollador, su aplicación debe estar libre de todos los errores en todos los dispositivos. En este caso, utilizaremos SafeArea.

Consulte el siguiente ejemplo:

SafeArea(
   minimum: const EdgeInsets.all(12.0),
   child: Text('Your Widget'),
)

En el ejemplo anterior, hemos utilizado la propiedad mínima . Aquí, se agrega un relleno mínimo de 12 a todos los lados, ya que todas las direcciones (superior, inferior, derecha, izquierda) son verdaderas de forma predeterminada.

Si desea usar SafeArea en una dirección particular, puede hacerlo de la siguiente manera:

SafeArea(
   top: true,
   left: false,
   bottom: true,
   right: true,
   minimum: const EdgeInsets.all(12.0),
   child: Text('Your Widget'),
)

En el ejemplo anterior, podemos ver que todas las direcciones están configuradas como verdaderas excepto la izquierda y, por lo tanto, SafeArea no se usa en esa dirección.

Ejemplo: Sin SafeArea

import 'package:flutter/material.dart';
  
void main() => runApp(MyApp());
  
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Text('This is an example explaining use of SafeArea',
         style: TextStyle(color: Colors.green,
         fontSize: 20
         ),
        ),
      ),
    );
  }
}

En el código anterior, no hemos utilizado SafeArea y, como resultado, se imprime texto en la barra de estado. Tenga en cuenta que no hemos utilizado App Bar aquí, porque App Bar calcula automáticamente los valores y agrega el relleno requerido.

Producción:

Con SafeArea:

import 'package:flutter/material.dart';
  
void main() => runApp(MyApp());
  
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: SafeArea(
          top: true  
        child: Scaffold(
          body: Text(
            'This is an example explaining use of SafeArea',
            style: TextStyle(color: Colors.green, fontSize: 20),
          ),
        ),
      ),
    );
  }
}

En el código anterior, hemos utilizado SafeArea y podemos ver que se agrega relleno automáticamente alrededor del texto y no cubre la barra de estado.

Producción:

En el resultado anterior, la pantalla solo está cubierta por la barra de estado. Incluso si se hubiera cubierto con muescas, cámaras, etc., incluso entonces la interfaz de usuario se ajustaría de acuerdo con ello.

Nota: No es necesario utilizar SafeArea encima de Scaffold. Puede usarlo sobre cualquier widget, que crea que puede dispersarse o crear obstrucciones en los elementos de la pantalla.