Flutter - #7. SafeArea

1. SafeArea 위젯은 화면 레이아웃에서 안전한 영역을 지정하는 데 사용되는 Flutter 위젯입니다. 이 위젯은 주로 상단 바, 하단 바, 화면 가장자리 등과 겹치는 부분을 피하고 사용자 인터페이스 요소를 배치할 때 유용합니다. SafeArea를 사용하면 여러 디바이스에서 일관된 레이아웃을 유지할 수 있습니다.

2. 주요 속성과 예시 코드

1) left: 왼쪽 여백을 설정합니다.
2) top: 상단 여백을 설정합니다.
3) right: 오른쪽 여백을 설정합니다.
4) bottom: 하단 여백을 설정합니다.
5) minimum: SafeArea의 모든 방향의 최소 여백을 설정합니다.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: SafeAreaExample(),
    );
  }
}

class SafeAreaExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('SafeArea Example'),
      ),
      body: SafeArea(
        left: true, // 왼쪽 여백 사용
        right: true, // 오른쪽 여백 사용
        top: false, // 상단 여백 미사용
        bottom: true, // 하단 여백 사용
        minimum: EdgeInsets.all(16.0), // 모든 방향의 최소 여백
        child: Container(
          color: Colors.blue,
          child: Center(
            child: Text(
              'This is a SafeArea Example',
              style: TextStyle(color: Colors.white, fontSize: 24.0),
            ),
          ),
        ),
      ),
    );
  }
}

이 예시 코드에서는 SafeArea를 사용하여 화면의 왼쪽, 오른쪽 및 하단 여백을 설정하고 상단 여백은 사용하지 않았습니다. SafeArea 내부에 자식 위젯을 배치하여 여백이 적용된 화면을 만들 수 있습니다.