[flutter] Spacer를 이용하여 위젯 사이의 간격을 동적으로 조절하는 방법은?
Flutter 앱에서 위젯 사이의 간격을 동적으로 조절하려면 Spacer 위젯을 사용할 수 있습니다. Spacer는 유연한 간격을 만들어주는 위젯으로, 빈 공간을 확보하여 위젯들을 균등하게 배치하는 데 유용합니다.
Spacer의 사용법
Spacer를 사용하는 방법은 매우 간단합니다. 다음은 Spacer를 이용하여 간격을 동적으로 조절하는 예시 코드입니다.
Column(
children: <Widget>[
Container(
height: 100,
color: Colors.blue,
),
Spacer(flex: 1), // 위젯 사이의 간격을 조절합니다.
Container(
height: 100,
color: Colors.red,
),
],
)
위의 예시 코드에서 Spacer 위젯은 Column의 자식으로 추가되었습니다. Spacer 위젯은 flex 속성을 이용하여 간격을 조절할 수 있는데, 여기서 flex 값은 간격을 결정하는데 사용되는 비율을 나타냅니다. Flex 값이 큰 Spacer일수록 더 많은 공간을 차지하게 됩니다.
결과
위의 예시 코드를 실행하면 파란색과 빨간색의 높이가 100픽셀로 동일하지만 Spacer의 유무에 따라 파란색과 빨간색 사이의 간격이 달라집니다.
결론
Flutter의 Spacer를 이용하면 위젯 사이의 간격을 동적으로 조절할 수 있으며, 각 Spacer의 flex 값을 조절하여 원하는 간격을 유연하게 조절할 수 있습니다.
참고: Flutter Spacer Class Documentation