Flutter[플러터] / FractionallySizedBox 를 사용하여 부모 사이즈에 맞게 반응형 위젯 만들기 (fractional, 비율, 크기, 사이즈, 유동적) FractionallySizedBox (Flutter Widget of the Week)

FractionallySizedBox class

자식 위젯의 크기를 전체 사용 가능 공간의 일부로 지정하는 위젯입니다. 레이아웃 알고리즘에 대한 자세한 내용은 RenderFractionallySizedOverflowBox를 참조하세요.

https://youtu.be/PEsY654EGZ0

공식 문서 코드

 

---

흔히들 앱에서 위젯을 배치할 때 지정된 값이 아닌 "MediaQuery,sizeOf(Context).width * 0.8" 같이 화면의 길이에 비례하여 사이즈를 지정해 본 적이 있을 것이다. 그렇다면 이번엔 화면의 길이에 비례하여 사이즈를 지정하는 것이 아닌 부모에 비례하여 사이즈를 제작해야 한다면 어떻게 하겠는가? 이럴 때 사용할 수 있는 것이 바로 FractionallySizedBox 위젯이다.

이 FractionallySizedBox 는 레이아웃에서 부모의 크기에 비례하는 크기를 가지는 박스를 만들 때 사용된다. 간단하게 알아보자.

하위 속성

속성명	타입	기본값	설명
alignment	AlignmentGeometry	Alignment.center	자식 위젯을 부모 내에서 어떻게 정렬할지 설정하는 값
widthFactor	double?	null	부모의 너비에서 차지할 비율을 설정하는 값
heightFactor	double?	null	부모의 높이에서 차지할 비율을 설정하는 값

 

암튼 속성값만 보면 알겠지만 사용하는 법도 있는 그대로다. 

FractionallySizedBox(
  widthFactor: 0.5, // width, 너비
  heightFactor: 0.3, // height, 높이
  child: Container(
    color: Colors.blue,
  ),
),

 

wdith/heughtFactor 값은 double 값을 받는데 0부터 1까지 받게 된다. 말 그대로 비율인 것이다.

예를 들어 화면 너비의 길이가 전체 300이라고 초보자. 그렇다면 이 화면에서 widthFactor: 0.5는 어떻게 작용할까?

당연하겠지만 화면 너비의 0.5 배이니까 150이 나올 것이다.

아주 간단하지 않은가?

그렇다면 이번엔 이 위젯의 부모 요소에 크기가 들어가 있는 상황이다.

SizedBox(
  width: MediaQuery.of(context).size.width * 0.5, // 300 * 0.5 => 150
  height: MediaQuery.sizeOf(context).height,
  child: Center(
    child: FractionallySizedBox(
      widthFactor: 0.5, // 150 * 0.5 => 75
      heightFactor: 0.3,
      child: Container(
        color: Colors.blue,
      ),
    ),
  ),
),

 

마찬가지로 화면의 너비가 300이라면 이 코드에서 부모 요소인 SizedBox 의 width 는 150 일 것이다. 

근데 이제 이 FractionallySizedBox 위젯은 화면의 길이가 아닌 부모의 길이에서 크기를 가져오는 것이기 때문에 widthFactor 로 지정하는 값은 화면의 너비가 아닌 부모 요소, 즉 SizedBox 의 너비인 150을 가져오게 되는 것이다. 그렇게 되면 0.5를 곱해주는 값이 300이 아닌 자연스레 150 이 되면서 아래의 Container 의 너비는 75가 되는 것이다.

그렇다. 이 위젯은 이 위젯이 위치해 있는 곳에 따라 가져오는 크기가 달라지는 것이다. 최상단에 위치해 있다면 

(최상단 사용 시)
MediaQuery.of(context).size.width, // 화면의 너비에서 사이즈를 가져옴
widthFactor: 1, // 부모의 너비에서 사이즈를 가져옴

이 코드 둘 다 동작엔 차이가 없을 것이다. 다만 사용하는 곳이 SafeArea 같은 패딩을 먹여주는 위젯 아래에 위치해 있다면 width 는 그대로 패딩이 먹힌 크기를, 미디어쿼리 사이즈는 화면 자체의 크기를 가쟈오게 되는 것이다.

 

암튼 이렇게 FractionallySizedBox 에 대해서 알아보았다. 처음엔 문서를 제대로 안 읽어서 "그냥 이거 쓸빠에 미디어 쿼리 쓰는 게 53만 배 빠르겠네" 이 생각했다가 잘 읽어보니 부모의 크기를 가져온다는 것을 알고 정말 활용도가 아~주 넓은 위젯이란 걸 알아버렸다. 나도 평소에 모르던 위젯이라 사용해 본 적 없는데 이 글을 기점으로 많이 사용해 볼 것 같다. 그럼 도움이 되었길 바라며 마치겠다.