SafeArea e o Notch

Parte da seção Layouts que se adaptam do Journey de Flutter da Coddy. Lição 13 de 30.

A maioria dos celulares não tem uma tela retangular desobstruída. O relógio e o recorte da câmera cobrem a parte de cima, e uma barra inicial cobre a parte de baixo. Uma AppBar sabe disso e desloca o título para baixo, mas uma página sem ela começa bem na borda superior, abaixo do relógio.

SafeArea desloca seu filho para fora dessas áreas:

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

Ele verifica quanto de cada borda está coberto e adiciona exatamente esse espaço. Em um celular sem recorte, não adiciona nada, então o mesmo código funciona em todos os celulares.

Um Padding fixo não consegue fazer isso: 16 pixels é pouco demais em um celular cuja barra de status tem 47 pixels de altura e demais em um que não tem nenhuma.

Desafio

Fácil

Em um celular com notch, Good morning fica escondido sob o relógio, e o botão fica sobre a barra inicial. Mantenha a página inteira fora de ambos.

Experimente você mesmo

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'),
            ),
          ],
        ),
      ),
    );
  }
}