[Flutter] SafeArea 함수, Go To..

SafeArea함수란? & 적용하기

 

플러터에서 SafeArea 함수는 안드로이드나 iOS의 상단 바나 하단 네비게이션 바를 넘어서 앱이 만들어지는 것을 방지하는 함수이다.

class HomeScreen extends StatelessWidget {
  const HomeScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        color: Colors.black,
        child: Column(
          children: [
            Container(
              color: Colors.red,
              width: 50.0,
              height: 50.0,
            ),

 

위 코드는 앱의 홈스크린에 넣을 위젯들이 들어가 있는 class HomeScreen이다.

여기서 커다란, 배경색이 black인 container를 만들어주고, 위에서는 생략되었지만

가로* 세로가 50px인 작은 container (색은 빨주노초) 4개가 있다.

 

이때 SafeArea 함수를 적용하지 않으면 앱 화면은 다음과 같이 나타난다.

 

상태 표시줄 부분을 넘어서까지 앱이 제작되어 있음을 알 수 있다. iOS도 마찬가지이다.

여기서 SafeArea 함수를 적용시키면 다음과 같이 바뀐다.

class HomeScreen extends StatelessWidget {
  const HomeScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        bottom: false,
        child: Container(
          color: Colors.black,
          child: Column(
            children: [
              Container(
                color: Colors.red,
                width: 50.0,
                height: 50.0,
              ),

 

위 코드는 SafeArea를 적용시킨 코드이고, SafeArea 함수로 함수 묶기를 간편하게 하는 방법은

Alt + Enter 후 Wrap With Widget을 하는 것이다.

 

짜잔! 상태 표시줄 부분에 앱 화면이 침범하지 않는다.

SafeArea를 적용하지 않았을 때가 개인적으로 더 예뻐보인다고 생각하긴 하지만..

유용한 함수인 것 같다.

Go to를 통해 함수의 상세 정보 알아보기

이런 SafeArea 함수에 대한 정보를 한눈에 확인할 수 있다.

 

Go To > Declaration or Usages 로 가면

SafeArea 함수와 관련 키워드 등이 정의된 Dart 문서가 열리며

주석을 통해 영어로 된 상세한 설명까지 접할 수 있다.

 

아래에도 설명이 빼곡하다.

이 문서에 나와있는 여러 키워드 중

this.bottom = true 를 통해 알 수 있는 것은

이 키워드를 통해서 아래만 SafeArea 적용이 되지 않도록 조절해 줄 수 있다는 점..

 

Go To를 통해서는 갖가지 정보를 상세하게 접할 수 있다.