SafeArea와 노치

Coddy Flutter 여정의 화면 크기에 맞는 레이아웃 섹션에 포함된 레슨. 30개 중 13번째.

대부분의 휴대폰 화면은 깔끔한 직사각형이 아닙니다. 시계와 카메라 노치가 화면 상단을 차지하고, 홈 표시줄이 하단을 차지합니다. AppBar는 이를 알고 제목을 아래로 옮기지만, AppBar가 없는 페이지는 시계 아래의 맨 위 가장자리에서 바로 시작합니다.

SafeArea는 자식 위젯을 이러한 부분에서 벗어나게 합니다.

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

SafeArea는 휴대폰에 각 가장자리가 얼마나 가려져 있는지 확인하고 정확히 그만큼의 공간을 추가합니다. 노치가 없는 휴대폰에서는 아무것도 추가하지 않으므로 같은 코드가 모든 휴대폰에 맞습니다.

고정된 Padding으로는 이렇게 할 수 없습니다. 상태 표시줄 높이가 47픽셀인 휴대폰에서는 16픽셀이 너무 적고, 상태 표시줄이 없는 휴대폰에서는 너무 많습니다.

챌린지

쉬움

노치가 있는 휴대폰에서는 Good morning이 시계 아래에 숨고 버튼이 홈 바에 놓입니다. 페이지 전체가 두 곳 모두에 가려지지 않도록 하세요.

직접 해보기

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