SafeArea ve Çentik

Coddy'nin Flutter Journey'sinin Her Ekrana Uyan Düzenler bölümünün bir parçası. Ders 13 / 30.

Çoğu telefonun ekranı düzgün bir dikdörtgen değildir. Saat ve kamera çentiği üst kısmı, ana ekran çubuğu ise alt kısmı kaplar. Bir AppBar bunu bilir ve başlığını aşağı kaydırır; ancak böyle bir çubuğu olmayan bir sayfa, saatin altındaki en üst kenardan başlar.

SafeArea, alt öğesini bu bölümlerin dışına taşır:

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

Telefonun her kenarının ne kadarının kaplandığını öğrenir ve tam o kadar boşluk ekler. Çentiği olmayan bir telefonda hiçbir şey eklemez; böylece aynı kod her telefona uyar.

Sabit bir Padding bunu yapamaz: 16 piksel, durum çubuğu 47 piksel yüksekliğinde olan bir telefonda çok az, durum çubuğu olmayan bir telefonda ise fazla gelir.

Görev

Kolay

Çentikli bir telefonda, Good morning saatin altında gizlenir ve düğme ana ekran çubuğunun üzerine gelir. Tüm sayfayı her ikisinden de uzak tut.

Kendin dene

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