[Flutter] Widget - SafeArea

1. SafeArea란?

SafeArea Widget은 다양한 모바일 화면(크기, 노치 등)에서도 컨텐츠가 온전히 보여질 수 있도록 충분한 여백이 확보된 영역을 의미합니다.

2. SafeArea 생성자 및 속성

https://api.flutter.dev/flutter/widgets/SafeArea-class.html

SafeArea class - widgets library - Dart API

Flutter Material API 가이드를 통해 SafeArea Widget의 생성자 및 중요 속성에 대해 정리해보도록 하겠습니다.

 

○ 생성자(Constructor)

<SafeArea 생성자>

 

○ 속성(Property)

1) bottom/left/right/top

<bottom 속성>

- 매개변수 타입 : bool

- 역할 : True/False 설정을 통해 SafeArea의 상하좌우 영역 개별 선택

 

2) child

<child 속성>

- 사용 필수 속성

- 매개변수 타입 : Widget

- 역할 : SafeArea 영역 내 1개의 하위 Widget 컨텐츠 추가 가능

3. SafeArea 예제 코드

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      title: 'Description',
      theme: ThemeData(primaryColor: Colors.blue),
      home: Scaffold(
        appBar: AppBar(
          title: const Text(
            'TITLE',
          ),
        ),
        body: const SafeArea(
          bottom: true,
          left: true,
          right: true,
          top: true,
          child: Center(
            child: Text(
              'SafeArea',
              style: TextStyle(
                fontSize: 30,
                fontWeight: FontWeight.bold,
              ),
              textAlign: TextAlign.center,
            ),
          ),
        ),
      ),
    ),
  );
}

예제 코드의 의미는 다음과 같습니다.

• 'Description'이라는 문자열로 App 설명서 작성
• Colors Widget으로 파란색 테마 설정
• Scaffold Widget으로 메인 화면을 구현
  • AppBar Widget으로 상단 메뉴 구현
    • Text Widget으로 'TITLE'이란 제목 표시
  • SafeArea Widget으로 여백이 확보된 컨텐츠 영역 지정
    
    • bottom/left/right/top 속성을 true로 지정하여 SafeArea의 상하좌우 여백 설정
    • child 속성 내 Text Widget을 가운데로 정렬하여 추가
      • 'SafeArea'란 문자열 표시
      • 문자열 크기 30, 굵은 글씨, 가운데 정렬

4. SafeArea 실행 결과

<SafeArea Widget 실행 화면>