Usando SafeArea en Flutter

Solución:

SafeArea es básicamente un glorificado Padding widget. Si envuelve otro widget con SafeArea, agrega cualquier relleno necesario para evitar que su widget sea bloqueado por la barra de estado del sistema, muescas, agujeros, esquinas redondeadas y otras características “creativas” de los fabricantes.

Aquí hay un ejemplo sin SafeArea colocar:

Align(
  alignment: Alignment.topLeft,  // and bottomLeft
  child: Text('My Widget: ...'),
)

Y nuevamente con el widget envuelto en un widget SafeArea:

Align(
  alignment: Alignment.topLeft,  // and bottomLeft
  child: SafeArea(
    child: Text('My Widget: ...'),
  ),
)

Puede establecer un acolchado mínimo para los bordes no afectados por muescas y tales:

SafeArea(
  minimum: const EdgeInsets.all(16.0),
  child: Text('My Widget: ...'),
)

También puede desactivar las inserciones del área segura para cualquier lado:

SafeArea(
  left: false,
  top: false,
  right: false,
  bottom: false,
  child: Text('My Widget: ...'),
)

Establecerlos todos en falso sería lo mismo que no usar SafeArea. El valor predeterminado para todos los lados es true. La mayoría de las veces no necesitará usar esta configuración, pero puedo imaginar una situación en la que tenga un widget que ocupe toda la pantalla. Quieres que la parte superior no esté bloqueada por nada, pero no te importa la parte inferior. En esa causa solo te pondrías bottom: false pero deja los otros lados a su defecto true valores.

SafeArea(
  bottom: false,
  child: myWidgetThatFillsTheScreen,
)

Código suplementario

En caso de que quieras jugar más con esto, aquí tienes main.dart:

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: BodyWidget(),
      ),
    );
  }
}

class BodyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Align(
      alignment: Alignment.topLeft,
      child: SafeArea(
        left: true,
        top: true,
        right: true,
        bottom: true,
        minimum: const EdgeInsets.all(16.0),
        child: Text(
            'My Widget: This is my widget. It has some content that I don't want '
            'blocked by certain manufacturers who add notches, holes, and round corners.'),
      ),
    );
  }
}

Cuando envuelve un widget A en un área segura, le está preguntando al marco “Por favor, mantenga mi widget A lejos de las muescas y la navegación de la interfaz de usuario del dispositivo “.

Los argumentos ‘superior, inferior, derecha e izquierda’ se utilizan para decirle al marco si desea que evite las intrusiones del dispositivo desde esos lados específicamente.

Por ejemplo: si coloca su widget A dentro de un área segura en la parte superior de la pantalla y establece el “cima“argumento para falso, será recortado por las muescas del iPhone X y Pixel 3.

---

---

Utiliza Nuestro Buscador