Row & Column 공간 문제

Flutter에서 Row와 Column은 레이아웃을 구성하는 데 기본적인 위젯입니다. 그러나 이들은 자식 위젯들을 가능한 한 많은 공간에 펼치려는 성질이 있어서, 때때로 레이아웃 관련 문제를 일으킬 수 있습니다. 이러한 문제를 해결하기 위해, Flutter는 여러 유용한 위젯들을 제공합니다.

1. Expanded

[[Expanded]]

• 목적: Expanded 위젯은 Row, Column, Flex 내의 사용 가능한 공간을 자식 위젯에 할당합니다.
  
• 사용법: Expanded는 자식 위젯을 감싸서 그 위젯이 사용 가능한 모든 공간을 차지하도록 합니다. flex 속성을 사용하여 사용 가능한 공간 중에서 어느 정도의 비율을 차지할지 조정할 수 있습니다. dartCopy code Row( children: <Widget>[ Expanded( child: Container(color: Colors.red), ), Container(width: 50, color: Colors.green), ], )
  

2. Flexible

• 목적: Flexible도 Expanded와 비슷하지만, 자식 위젯에게 남는 공간을 더 유연하게 할당합니다.
  
• 사용법: flex 속성을 사용하여 공간 분할 비율을 지정합니다. fit 속성으로 자식이 공간을 어떻게 차지할지 조정할 수 있습니다 (FlexFit.tight는 Expanded와 동일하게 동작). dartCopy code Row( children: <Widget>[ Flexible( flex: 2, child: Container(color: Colors.blue), ), Flexible( flex: 1, child: Container(color: Colors.orange), ), ], )
  

3. Wrap

• 목적: Wrap 위젯은 자식들이 주어진 방향으로 공간을 넘어갈 때, 다음 줄로 자동으로 넘어가게 해줍니다.
  
• 사용법: Row나 Column과는 다르게, Wrap은 자식 위젯들이 화면을 넘어가면 자동으로 줄바꿈을 합니다. dartCopy code Wrap( children: <Widget>[ Chip(label: Text('Chip 1')), Chip(label: Text('Chip 2')), // 여러 개의 Chip 위젯 ], )
  

4. ConstrainedBox 또는 SizedBox

• 목적: 이 위젯들은 자식 위젯에 최소 또는 최대 크기 제약을 적용합니다.
  
• 사용법: ConstrainedBox는 constraints 속성을 사용하여 크기 제약을 적용하고, SizedBox는 특정 크기를 지정합니다. dartCopy code SizedBox( width: 100, height: 100, child: Container(color: Colors.purple), )
  

이러한 위젯들을 적절히 사용하면 Row와 Column이 만들어내는 레이아웃 문제를 효과적으로 해결할 수 있습니다. 레이아웃을 구성할 때는 이러한 위젯들의 조합과 상호 작용을 이해하는 것이 중요합니다.

Flutter에서 Row와 Column 위젯의 mainAxisSize 속성을 설정하여 주축(main axis)의 크기를 조절할 수 있습니다. mainAxisSize는 주로 두 가지 값, MainAxisSize.min과 MainAxisSize.max를 가질 수 있습니다.

MainAxisSize.min

[[TextField]]

• 설명: MainAxisSize.min을 사용하면, Row 또는 Column은 자식 위젯들이 필요로 하는 최소 공간만큼만 차지합니다.
  
• 적용 예시: Row에서 MainAxisSize.min을 설정하면, 자식 위젯들의 가로 길이 합만큼만 공간을 차지하고, Column에서는 자식 위젯들의 세로 길이 합만큼만 공간을 차지합니다. dartCopy code Row( mainAxisSize: MainAxisSize.min, children: <Widget>[ Icon(Icons.star), Text("Star"), ], )
  

MainAxisSize.max

• 설명: MainAxisSize.max는 Row 또는 Column이 부모 위젯이 허용하는 최대 공간을 차지하도록 합니다.
  
• 적용 예시: Row에서 MainAxisSize.max를 설정하면, 가능한 모든 가로 공간을 차지하고, Column에서는 가능한 모든 세로 공간을 차지합니다. dartCopy code Column( mainAxisSize: MainAxisSize.max, children: <Widget>[ Text("First Item"), Text("Second Item"), ], )
  

사용 시 고려사항

• mainAxisSize 속성은 Row와 Column이 차지하는 공간의 양을 결정하지만, 내부의 자식 위젯들이 어떻게 배치될지는 결정하지 않습니다. 자식 위젯들의 정렬(배치)는 mainAxisAlignment과 crossAxisAlignment 속성으로 조절할 수 있습니다.
• MainAxisSize.min은 자식 위젯들이 필요로 하는 최소 공간만을 차지하기 때문에, 사용 가능한 공간이 충분하더라도 남는 공간을 활용하지 않습니다. 반면, MainAxisSize.max는 가능한 많은 공간을 차지하기 때문에, 더 유동적인 레이아웃을 만드는 데 유용할 수 있습니다.

mainAxisSize를 적절히 사용하면 Row와 Column 위젯을 통해 더 유연하고 다양한 레이아웃을 구성할 수 있습니다.