SafeArea dan Notch

Termasuk bagian Layout yang Menyesuaikan dalam perjalanan Flutter di Coddy. Pelajaran 13 dari 30.

Sebagian besar ponsel tidak memiliki area layar berbentuk persegi panjang yang bersih. Jam dan takik kamera menutupi bagian atas, sedangkan bilah beranda menutupi bagian bawah. AppBar mengetahui hal ini dan menggeser judulnya ke bawah, tetapi halaman tanpa AppBar dimulai tepat dari tepi atas, di bawah jam.

SafeArea menjauhkan child-nya dari bagian-bagian tersebut:

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

SafeArea menanyakan ponsel seberapa banyak bagian dari setiap tepi yang tertutup, lalu menambahkan ruang sebesar itu. Pada ponsel tanpa takik, SafeArea tidak menambahkan apa pun, sehingga kode yang sama cocok untuk semua ponsel.

Padding tetap tidak bisa melakukan ini: 16 piksel terlalu sedikit pada ponsel dengan bilah status setinggi 47 piksel, dan terlalu banyak pada ponsel tanpa bilah status.

Tantangan

Mudah

Di ponsel dengan notch, Good morning tersembunyi di bawah jam dan tombol berada di atas bilah beranda. Jauhkan seluruh halaman dari keduanya.

Coba sendiri

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