SafeArea i wcięcie na ekranie

Część sekcji Układ dopasowany do ekranu ścieżki Flutter w Coddy. Lekcja 13 z 30.

Większość telefonów nie ma ekranu w kształcie idealnego prostokąta. Zegar i wcięcie na aparat zasłaniają górną część, a pasek ekranu głównego — dolną. AppBar uwzględnia to i przesuwa tytuł w dół, ale strona bez niego zaczyna się tuż przy górnej krawędzi, pod zegarem.

SafeArea odsuwa swój element podrzędny od tych obszarów:

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

Pyta telefon, jaka część każdej krawędzi jest zasłonięta, i dodaje dokładnie tyle miejsca. Na telefonie bez wcięcia nie dodaje nic, więc ten sam kod pasuje do każdego telefonu.

Stały Padding nie może tego zrobić: 16 pikseli to za mało na telefonie z paskiem stanu o wysokości 47 pikseli, a za dużo na takim, który go nie ma.

Wyzwanie

Łatwy

Na telefonie z wcięciem Good morning chowa się pod zegarem, a przycisk znajduje się na pasku ekranu głównego. Trzymaj całą stronę z dala od obu tych elementów.

Spróbuj swoich sił

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