[flutter] Spacer 위젯을 이용하여 위젯의 가운데 정렬과 간격을 설정하는 방법은?

21 Dec 2023

flutter

Flutter 앱을 개발하다보면 UI 요소를 가운데 정렬하고 공간을 조정해야 할 때가 있습니다. Spacer 위젯을 사용하면 이를 쉽게 처리할 수 있습니다. 이번 포스트에서는 Spacer 위젯을 이용하여 위젯을 가운데 정렬하고 간격을 설정하는 방법에 대해 알아보겠습니다.

Spacer란?

Spacer는 유연한 간격을 제공하여 주어진 공간을 균등하게 분배하는 Flutter 위젯입니다. 주로 Column 또는 Row 내부에서 사용되어 공간을 채우고 나머지 공간을 동적으로 할당합니다.

Spacer의 사용 방법

다음은 Spacer를 사용하여 위젯을 가운데 정렬하고 간격을 설정하는 간단한 예제입니다.

Row(
  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  children: <Widget>[
    Spacer(),
    Container(
      width: 100,
      height: 100,
      color: Colors.blue,
    ),
    Spacer(),
  ],
)

이 예제에서 Spacer 위젯은 Container 위젯을 중앙에 정렬하고 간격을 균등하게 설정합니다. spacer 위젯은 유연한 간격을 제공하여 주어진 공간을 동적으로 분배합니다.

다음은 주요 속성입니다.

flex: Spacer의 유연한 간격을 설정합니다. 기본값은 1이며, 이 값을 조정하여 공간을 분배할 수 있습니다.

결론

Spacer 위젯을 사용하면 UI 요소를 가운데 정렬하고 간격을 설정하는 것이 간단해집니다. 유연하게 공간을 분배하여 UI 디자인을 보다 쉽게 구성할 수 있습니다. Flutter에서의 유연한 레이아웃 구성을 위해 Spacer 위젯을 적극 활용해 보세요!

참고 자료:

Flutter 공식 문서: Spacer class