[Flutter] Flexible위젯(함수)

목차 1. 개요 1) Flutter의 레이아웃 시스템 2) Flexible 위젯의 역할 3) Flexible 위젯의 속성 2. 사용법 1) 기본적인 사용법 2) 중첩된 Flexible 위젯 사용법 3) Flex와 Expanded와의 차이점 3. 예제 1) 간단한 예제 2) 복잡한 레이아웃 예제 4. 주의사항 1) 성능에 대한 고려 2) 다른 레이아웃 위젯과의 조합 시 고려해야 할 사항

1. 개요

1) Flutter의 레이아웃 시스템
Flutter는 위젯을 사용하여 화면을 구성하는데, 이를 위해 유연하고 강력한 레이아웃 시스템을 제공.

2) Flexible 위젯의 역할
Flexible 위젯은 부모 위젯에서 주어진 공간 내에서 유연하게 크기를 조절하는 데 사용된다. 이는 화면의 크기가 달라지는 다양한 디바이스에서 일관된 UI를 제공하는 데 도움이 된다.

3) Flexible 위젯의 속성

속성	설명
flex	Flexible 위젯이 가지는 공간의 비율을 지정
fit	Flexible 자식 위젯이 부모의 공간에 맞게 어떻게 적응할지를 결정
child	Flexible 내에 배치될 자식 위젯을 지정

2. 사용법

1) 기본적인 사용법

Flexible(   flex: 1,   fit: FlexFit.tight,   child: Container(     color: Colors.blue,     height: 50,   ), )

2) 중첩된 Flexible 위젯 사용법

Row(   children: [     Flexible(       flex: 1,       child: Flexible(         flex: 1,         child: Container(color: Colors.red),       ),     ),     Flexible(       flex: 2,       child: Container(color: Colors.blue),     ),   ], )

3) Flex와 Expanded와의 차이점
Flex와 Expanded는 부모의 공간을 모두 차지하고 남은 공간을 자식들 사이에 분배하는 데에 반해, Flexible은 주어진 flex 값에 따라 크기를 조절.

3. 예제

1) 간단한 예제

Row(   children: [     Flexible(       flex: 1,       child: Container(color: Colors.red),     ),     Flexible(       flex: 2,       child: Container(color: Colors.blue),     ),   ], )

2) 복잡한 레이아웃 예제

Row(   children: [     Flexible(       flex: 1,       child: Container(color: Colors.red),     ),     Flexible(       flex: 3,       child: Container(color: Colors.blue),     ),     Flexible(       flex: 2,       child: Container(color: Colors.green),     ),   ], )

4. 주의사항

1) 성능에 대한 고려
Flexible을 과도하게 사용하면 성능에 영향을 줄 수 있으므로 적절한 사용이 필요.

2) 다른 레이아웃 위젯과의 조합 시 고려해야 할 사항
다른 레이아웃 위젯과 조합하여 사용할 때, 각 위젯의 특성을 고려하여 적절한 배치