SafeArea et l’encoche

Fait partie de la section Des mises en page adaptées du Journey Flutter de Coddy. Leçon 13 sur 30.

La plupart des téléphones n’ont pas un écran parfaitement rectangulaire. L’horloge et l’encoche de l’appareil photo recouvrent le haut, et une barre d’accueil recouvre le bas. Un AppBar le sait et descend son titre, mais une page qui n’en a pas commence juste au bord supérieur, sous l’horloge.

SafeArea éloigne son enfant de ces zones :

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

Il demande au téléphone quelle partie de chaque bord est recouverte et ajoute exactement l’espace nécessaire. Sur un téléphone sans encoche, il n’ajoute rien, de sorte que le même code convient à tous les téléphones.

Un Padding fixe ne peut pas faire cela : 16 pixels, c’est trop peu sur un téléphone dont la barre d’état mesure 47 pixels de haut, et trop sur un téléphone qui n’en a pas.

Défi

Facile

Sur un téléphone avec une encoche, Good morning se cache sous l’horloge et le bouton se trouve sur la barre d’accueil. Garde toute la page à l’écart des deux.

Essayez vous-même

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