[015] 플러터 (Flutter) 배우기 - Flexible, Expanded (반응형으로 만들기)

안녕하세요~ totally 개발자입니다.

 

Flexible, Expanded

 

Flexible

 

이 시간에는 Flexible, Expanded 위젯에 관해 살펴보도록 하겠습니다. 이 위젯들은 반응형으로 만들 때 즉 가능한 공간을 채울 때 사용하게 되는 위젯들입니다. Flexible 위젯의 사용법과 어떤 경우에 사용하는지 알아보겠습니다. 

 

일반적인 경우

쉬운 예시를 위해 간단하게 Column에 Row를 적용하고 그 Row에 2개의 컨테이너들을 width: 150, height: 150으로 지정하여 배치하였습니다. 위의 시뮬레이터를 보면 아시겠지만, 양끝에 공간이 남는 것을 알 수 있습니다. 만약 이 공간을 채우기 위해 width에 특정 값을 부여하는 경우에는 현재 아이폰 13 시뮬레이터지만, 만약 아이폰 13 미니 또는 프로 맥스의 크기를 사용한다면 이 특정 값으로 모든 디바이스에 대응하기에는 쉽지 않습니다. 그렇기 때문에, 어떠한 디바이스를 사용하더라도 이 공간을 메우기 위해서는 반응형으로 만드는 것이 좋습니다. 현재 이 경우에 대표적으로 2가지 방법이 있습니다. MediaQuery.of(context).size.width로 디바이스의 width를 구해서 적용하는 방법과 Flexible 또는 Expanded를 사용하는 방법입니다. 먼저 MediaQuery로 적용해보겠습니다.

 

MediaQuery 적용 모습

위의 모습대로, 여백 없이 꽉 채워졌음을 확인할 수 있습니다. 이렇게 사용할 때에는 계산에 주의해야 하는데 여기에서는 2개의 컨테이너들이기 때문에 / 2를 사용하여 2로 나누어 주었습니다. 하지만 이 계산 없이 가능한데 그것이 바로 Flexible를 활용하는 방법입니다.

 

Flexible 사용 모습

여기에서 달라진 점은 Flexible 위젯이 추가되었고 38, 39번째에 각각 flex: 1, fit: FlexFit.tight 속성들이 추가된 점입니다. flex 속성에는 integer 값이 들어가며 이 flex는 child의 크기를 결정짓는 비율이라고 보시면 됩니다. 여기에서는 1, 1이므로 50%, 50%이지만 1, 3으로 한다면 25%, 75%의 비율처럼 됩니다. FlexFit에는 FlexFit.tight와 FlexFit.loose가 있으며 tight는 가용 가능한 최대 공간, loose는 최소 공간을 채우는 것을 의미합니다. 

 

Flex가 각각 1, 3인 경우

위처럼 flex가 38번째, 46번째 줄처럼 각각 1, 3으로 적용한 모습은 위와 같습니다. 이렇게 Flexible 위젯을 적용하면 위에 나오는 아이폰 13이 아닌 다른 디바이스를 사용하여도 그대로 반응형으로 적용됩니다.

 

iPhone 13 Pro Max 시뮬레이터로 실행한 모습

위처럼 iPhone 13 Pro Max로 실행했을 때에도 반응형으로 잘 적용되어 실행되었음을 알 수 있습니다.

 

 

Expanded

 

Expanded 위젯은 Flexible 위젯을 간소화한 위젯으로 기본값으로 fit: FlexFit.Tight가 적용되어 있기 때문에 flex만 사용하셔서 적용할 수 있습니다.

 

Expanded 위젯 적용 (fit: FlexFit.tight가 기본 적용되어 있음)

이미지를 보면 기본값으로 fit: FlexFit.tight가 적용되어 있어 flex만 사용하여도 그대로 적용 가능한 것을 알 수 있습니다. 이 시간에는 Flexible과 Expanded 위젯들을 알아보았습니다. Flutter에서 UI 반응형으로 만들 때 반드시 알고 있어야 하는 위젯들이기 때문에 꼭 이해하시고 넘어가시면 됩니다. 감사합니다.

 

[전체 소스 코드]

 

[유튜브 강좌 영상]

 

https://youtu.be/Z4DZIYiEmrY