01. SafeArea in Flutter [Flutter Widget of the Week 톺아보기]

Flutter of the week란?

 공식 유튜브 채널에서 주 1회  Flutter의 다양한 기능, 팁, 패키지등의 사용 사례에 대한 간결하고 유익한 정보를 제공하는 영상시리즈
바로가기

 

Intro.

flutter는 단일한 코드베이스를 바탕으로 모바일(Android, iOS)뿐 아니라 PC와 웹까지 모두 개발이 가능한 크로스 플랫폼 입니다. 그렇기 때문에  Flutter는 다양한 디바이스와 화면 크기에 대응하기 위해 다양한 위젯을 제공하는데요. 그 중에서도  각 디바이스에 따라 자동으로 패딩을 조정하여 화면 상단 상태표시줄, 노치 등에 화면이 가려지는 것을 방지해주는 SafeArea라는 위젯에 대해 알아보도록 하겠습니다.

 

SafeArea 란?

A widget that insets its child by sufficient padding to avoid intrusions by the operating system.
- 운영 체제의 침입을 방지하기 위해 충분한 패딩으로 하위 클래스를 설정하는 위젯입니다.
* 출처 flutter.dev (https://api.flutter.dev/flutter/widgets/SafeArea-class.html)

 

SafeArea는 화면의 경계에 있는 시스템 바(상단 바, 하단 바)와 같은 부분에 따라 자동으로 패딩을 추가해주는 위젯입니다. 이를 통해 화면 내 컨텐츠가 시스템 바에 가려지지 않고 온전히 표시될 수 있도록 도와줍니다.

 

 

아래 예시 사진과 같이 앱바가 없는 스크롤뷰의 경우 일부 컨텐츠가 시스템바에 가려지게 되는데요. 이때 SafeArea를 사용하면 그러한 문제를 해결 할 수 있습니다.

SafeArea 속성

- left, top,right,bottom을 bool값으로 각각 설정할 수 있습니다.

- EdgeInsets 타입의 minimum 생성자로 SafeArea의 최솟값을 설정할수 있습니다. ( EdgeInsets.Zero가 기본값입니다.)

사용 예제

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('SafeArea 예제'),
        ),
        body: SafeArea(
          child: YourContentWidget(),
        ),
      ),
    );
  }
}

class YourContentWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      // 여기에 컨텐츠 위젯을 추가하세요
    );
  }
}