SafeArea y la muesca

Parte de la sección Diseños que se adaptan del Journey de Flutter de Coddy. Lección 13 de 30.

La mayoría de los teléfonos no tienen una pantalla con forma de rectángulo perfecto. El reloj y la muesca de la cámara cubren la parte superior, y una barra de inicio cubre la parte inferior. Un AppBar lo sabe y desplaza su título hacia abajo, pero una página sin uno empieza justo en el borde superior, debajo del reloj.

SafeArea desplaza su elemento secundario para alejarlo de esas zonas:

Scaffold(
  body: SafeArea(
    child: Column(
      children: [...],
    ),
  ),
)

Le pregunta al teléfono cuánto cubre cada borde y añade exactamente ese espacio. En un teléfono sin muesca no añade nada, así que el mismo código se adapta a todos los teléfonos.

Un Padding fijo no puede hacer esto: 16 píxeles son demasiado pocos en un teléfono cuya barra de estado mide 47 píxeles de alto, y demasiados en uno que no tiene barra de estado.

Desafío

Fácil

En un teléfono con una muesca, Good morning queda oculto debajo del reloj y el botón se encuentra sobre la barra de inicio. Mantén toda la página fuera de ambas zonas.

Pruébalo tú mismo

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        backgroundColor: Colors.orange.shade50,
        body: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            const Text('Good morning', style: TextStyle(fontSize: 32)),
            const Spacer(),
            ElevatedButton(
              onPressed: () {},
              child: const Text('Start workout'),
            ),
          ],
        ),
      ),
    );
  }
}