상세 컨텐츠

본문 제목

[Flutter] Flexible 위젯 사용법

Flutter

by dev.trams 2023. 10. 5. 17:43

본문

반응형

Flutter에서 레이아웃을 구성할 때 유연성을 갖는 것은 중요합니다. 이때 Flexible 위젯이 유용하게 사용됩니다. Flexible 위젯을 사용하면 화면 공간을 동적으로 조절하여 다양한 화면 크기와 기기에 대응할 수 있습니다.

 Flexible 위젯의 개요

Flexible 위젯은 주로 Row 또는 Column 위젯 내에서 사용되며, 자식 위젯의 크기 및 가중치를 제어하는 데 사용됩니다. 이를 통해 다양한 화면 크기에서 레이아웃을 조절할 수 있습니다.

 Flexible 위젯 사용하기

Flexible 위젯으로 자식 위젯 설정

Flexible 위젯을 사용하려면 Row 또는 Column 위젯 내에 배치하고 Flexible 위젯의 flex 속성을 설정합니다. flex 값은 해당 위젯이 차지하는 비율을 나타냅니다.

예를 들어, 세 개의 위젯을 가진 Row 위젯을 만들고 첫 번째와 두 번째 위젯에 Flexible을 적용해보겠습니다.

위 코드에서 첫 번째와 두 번째 Flexible 위젯은 각각 2:3의 비율로 화면 공간을 차지합니다.

 결과 확인

위와 같이 Flexible 위젯을 사용하면 화면을 가득 채우지 않고도 다양한 비율로 위젯을 배치할 수 있습니다. 위의 예제를 실행하면 두 개의 Flexible 위젯이 화면의 공간을 2:3 비율로 나누어 차지하는 것을 확인할 수 있습니다.

 주의사항

  • Flexible 위젯은 Row 또는 Column 위젯 내에서 사용됩니다.
  • flex 속성은 각 Flexible 위젯의 상대적인 비율을 나타냅니다. 이 값에 따라 위젯의 크기가 조절됩니다.

이상으로 Flutter에서 Flexible 위젯을 사용하여 레이아웃을 구성하는 방법에 대한 간단한 소개를 마치겠습니다. Flexible 위젯은 다양한 화면 크기와 레이아웃 요구 사항에 맞게 활용할 수 있는 강력한 도구입니다.

더 많은 정보와 예제는 Flutter 공식 문서에서 확인할 수 있습니다.

반응형

관련글 더보기