SafeArea e la tacca

Fa parte della sezione Layout adattabili del percorso Flutter di Coddy. Lezione 13 di 30.

La maggior parte dei telefoni non ha uno schermo rettangolare pulito. L’orologio e la tacca della fotocamera coprono la parte superiore, mentre una barra Home copre quella inferiore. Una AppBar ne tiene conto e sposta il titolo verso il basso, ma una pagina senza AppBar inizia proprio dal bordo superiore, sotto l’orologio.

SafeArea sposta il suo elemento figlio fuori da queste aree:

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

Chiede al telefono quanto è coperto ciascun bordo e aggiunge esattamente quello spazio. Su un telefono senza tacca non aggiunge nulla, quindi lo stesso codice si adatta a tutti i telefoni.

Un Padding fisso non può farlo: 16 pixel sono troppo pochi su un telefono con una barra di stato alta 47 pixel e troppi su uno che non ne ha.

Sfida

Facile

Su un telefono con notch, Good morning si nasconde sotto l’orologio e il pulsante si trova sulla barra Home. Tieni l’intera pagina lontana da entrambi.

Provalo tu

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