앱 개발/Flutter 공부

[Flutter] 10. 레이아웃 구성 2 - Flexible & Expanded

내만 2022. 6. 29. 16:36
728x90
반응형

 

 

 

 

 

🙆‍♂️Flexible


Flexible 위젯으로 감싸면 안에 있는 위젯은 크기를 %로 표현할 수 있습니다.

 

🚀flex


Flexible 위젯으로 감싸고 child 속성 다음으로 flex 속성을 사용해서 비율로 크기를 나타낼 수 있습니다.

 

 

이렇게 같은 수로 비율을 주게된다면 5 5로 주지 않아도 반으로 나뉘게 됩니다.

컨테이너가 3개가 있어도 같습니다.

 

 

이렇게 3개로 해도 동일한 비율이면 1:1:1로 나오는 모습입니다.

그리고 이는 Row 위젯 안에서만 아니라 Column위젯에서도 동일하게 동작합니다.

 

 

 

🙋‍♂️Expanded


Expanded는 Flexible의 flex값이 혼자 1로 되어있다고 생각할 수 있습니다.

이렇게 꽉채우는데 다른 요소 중에 크기 지정된 부분이 있다면 그 부분을 제외하고 꽉채웁니다.

728x90
반응형

'앱 개발 > Flutter 공부' 카테고리의 다른 글

[Flutter] 12. ListView  (0) 2022.06.29
[Flutter] 11. 커스텀 위젯  (0) 2022.06.29
[Flutter] 숙제 2  (0) 2022.06.29
[Flutter] 09. AppBar 디자인  (0) 2022.06.28
[Flutter] 08. 버튼 - Text, Icon, Elevated  (0) 2022.06.28