[flutter] Spacer를 사용하여 위젯의 가로줄과 세로줄을 균일하게 배치하는 방법은?

21 Dec 2023

flutter

가로줄에서 Spacer를 사용하려면, Row 위젯 안에 Spacer를 추가하면 됩니다. 예를 들어, 다음과 같이 코드를 작성할 수 있습니다:

Row(
  children: <Widget>[
    Container(
      width: 100.0,
      height: 50.0,
      color: Colors.red,
    ),
    Spacer(),
    Container(
      width: 100.0,
      height: 50.0,
      color: Colors.blue,
    ),
  ],
)

이 코드는 빨간색과 파란색 컨테이너를 동일한 공간에 균등하게 배치하는 가로줄을 생성합니다.

세로줄에서 Spacer를 사용하려면, Column 위젯 안에 Spacer를 추가하면 됩니다. 다음은 세로줄에 Spacer를 사용하는 예제 코드입니다:

Column(
  children: <Widget>[
    Container(
      width: 100.0,
      height: 50.0,
      color: Colors.red,
    ),
    Spacer(),
    Container(
      width: 100.0,
      height: 50.0,
      color: Colors.blue,
    ),
  ],
)

이 코드는 빨간색과 파란색 컨테이너를 동일한 공간에 균등하게 배치하는 세로줄을 생성합니다.

Spacer를 사용하면 유연한 화면 배치를 보다 간편하게 할 수 있습니다.

참고 문헌:

Flutter Spacer 관련 문서: https://api.flutter.dev/flutter/widgets/Spacer-class.html