SafeArea và phần khuyết

Thuộc phần Bố cục phù hợp với mọi màn hình trong hành trình Flutter của Coddy. Bài học 13 trên 30.

Hầu hết điện thoại không có màn hình hình chữ nhật trọn vẹn. Đồng hồ và phần khuyết chứa camera che mất phía trên, còn thanh điều hướng che mất phía dưới. AppBar biết điều đó và đẩy tiêu đề xuống, nhưng trang không có thanh này bắt đầu ngay từ cạnh trên, bên dưới đồng hồ.

SafeArea đẩy phần tử con ra khỏi những khu vực đó:

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

Nó hỏi điện thoại xem mỗi cạnh bị che bao nhiêu rồi thêm đúng khoảng trống tương ứng. Trên điện thoại không có phần khuyết, nó không thêm khoảng trống nào, nên cùng một đoạn code phù hợp với mọi điện thoại.

Padding cố định không thể làm được điều này: 16 pixel là quá ít trên điện thoại có thanh trạng thái cao 47 pixel, nhưng lại quá nhiều trên điện thoại không có thanh này.

Thử thách

Dễ

Trên điện thoại có tai thỏ, Good morning bị đồng hồ che khuất và nút nằm trên thanh màn hình chính. Hãy giữ toàn bộ trang tránh xa cả hai khu vực này.

Tự làm thử

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