[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