[Flutter] Expanded 와 SafeArea

서론

학교 수업에서 플러터를 배우는 중인데,,,

교수님 예제에서는 이런식으로 상단바 크기를 따로 지정해주고 있다..
하지만 이런식으로 하면 기기마다 상단바 크기가 다를 경우
레이아웃이 깨지는 경우가 생길 수 있기 때문에 ㅠㅠㅠ (반응형에 굉장히 집착하는 사람)
나 같은 경우 SafeArea 를 굉장히 선호하고 있다.

본론

SafeArea란?

• 기기의 노치나 스테이터스 바의 영역에 UI를 그리지 않도록 해주는 아주 편리한 위젯!
• UI가 그려져야 하는 영역을 자동으로 계산하여 담당하는 위젯.
  • 따로 상단바를 상수로 처리 하지 않아도 되고, 기기마다 레이아웃 깨질 일도 없어서 good
• Application 의 위젯 중 body 부분에 설정하면 좋을듯 함.
  • SafeArea ( child : .... 으로 생성 한다.

Expanded 이란?

• Flex (Column, Row, Flex) 내의 자식 위젯들 사이에 공간을 동적으로 분배하는 데 사용됨.
• Expanded 위젯을 사용하면 Flex 방향(수직 또는 수평)에 따라 자식 위젯이 사용 가능한 공간을 차지하도록 할 수 있음.
• 특히 여러 자식 위젯들이 주어진 공간 내에서 서로 다른 비율로 공간을 차지해야 할 때 유용

Expanded 위젯의 주요 속성

• child: Expanded 위젯이 확장할 자식 위젯

• flex: Expanded 위젯이 차지하는 공간의 비율을 정의

• 모든 Expanded 자식들의 flex 값의 합으로 각각의 Expanded 위젯이 차지할 공간의 비율이 결정됨

  • 예를 들어, flex 속성이 하나의 자식에게 2로 설정되고 다른 자식에게 1로 설정된 경우, 전자는 후자보다 두 배의 공간을 차지하게 됨. (기본값: 1)

• 2개 이상의 위젯이 함께 사용될 경우 (예 : Row 나 Column의 children 에서), 내가 차지할 수 있는 가장 큰 영역을 차지.
• 이 위젯을 사용치 않고 여러개의 위젯을 배치할 경우, 균등하게 영역을 나눈다.
• Expended (child: ... 으로 생성

  Row(
   children: <Widget>[
     Expanded(
       flex: 2,
       child: Container(
         color: Colors.red,
       ),
     ),
     Expanded(
       flex: 1,
       child: Container(
         color: Colors.green,
       ),
     ),
   ],
  )

이 예시에서는 Row 위젯이 두 개의 Expanded 자식을 가짐
첫 번째 자식은 flex 값이 2이고, 두 번째 자식은 flex 값이 1
-> 첫 번째 컨테이너가 사용 가능한 공간의 2/3을, 두 번째 컨테이너가 나머지 1/3을 차지하게 됨