SafeArea и вырез экрана

Часть раздела Адаптивная компоновка путешествия по Flutter на Coddy. Урок 13 из 30.

У большинства телефонов экран не представляет собой чистый прямоугольник. Часы и вырез для камеры закрывают верхнюю часть, а нижнюю — панель главного экрана. AppBar учитывает это и сдвигает заголовок вниз, но страница без него начинается прямо у верхнего края, под часами.

SafeArea сдвигает дочерний элемент, чтобы он не попадал на эти участки:

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

Он определяет, какая часть каждого края закрыта, и добавляет пространство ровно такого размера. На телефоне без выреза он ничего не добавляет, поэтому один и тот же код подходит для любого телефона.

Фиксированный Padding не может этого сделать: 16 пикселей слишком мало для телефона, у которого строка состояния высотой 47 пикселей, и слишком много для телефона, у которого её нет.

Задание

Легко

На телефоне с вырезом надпись Good morning скрывается под часами, а кнопка располагается на панели навигации. Размести всю страницу так, чтобы она не попадала ни под часы, ни на панель навигации.

Попробуйте сами

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