SafeArea und die Notch

Teil des Abschnitts Layouts für jede Bildschirmgröße der Flutter-Journey von Coddy. Lektion 13 von 30.

Die meisten Smartphones haben keinen rechteckigen Bildschirm ohne Aussparungen. Die Uhr und die Kamerakerbe verdecken den oberen Bereich, und eine Home-Leiste verdeckt den unteren. Eine AppBar weiß das und verschiebt ihren Titel nach unten, aber eine Seite ohne sie beginnt direkt an der oberen Kante, unter der Uhr.

SafeArea verschiebt sein untergeordnetes Element aus diesen Bereichen heraus:

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

Es fragt das Smartphone, wie viel von jeder Kante verdeckt ist, und fügt genau so viel Abstand hinzu. Bei einem Smartphone ohne Kerbe fügt es nichts hinzu, sodass derselbe Code auf jedes Smartphone passt.

Ein fester Padding kann das nicht: 16 Pixel sind auf einem Smartphone mit einer 47 Pixel hohen Statusleiste zu wenig und auf einem ohne Statusleiste zu viel.

Aufgabe

Einfach

Auf einem Telefon mit einer Notch wird Good morning von der Uhr verdeckt und die Schaltfläche liegt auf der Home-Leiste. Halte die gesamte Seite von beiden Bereichen fern.

Probier es selbst

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