SafeArea and the Notch

Part of the Layout That Fits section of Coddy's Flutter journey. Lesson 13 of 30.

Most phones do not have a clean rectangle of screen. The clock and the camera notch cover the top, and a home bar covers the bottom. An AppBar knows this and moves its title down, but a page without one starts right at the top edge, under the clock.

SafeArea moves its child out of those parts:

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

It asks the phone how much of each edge is covered and adds exactly that much space. On a phone with no notch it adds nothing, so the same code fits every phone.

A fixed Padding cannot do this: 16 pixels is too little on a phone whose status bar is 47 pixels tall, and too much on one with none.

Challenge

Easy

On a phone with a notch, Good morning hides under the clock and the button sits on the home bar. Keep the whole page out of both.

Try it yourself

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