플러터(Flutter)에서는 UI 구성 요소를 배치하기 위해 다양한 방법을 제공합니다. 스택(Stack)은 이러한 요소들을 쌓아 올리는 것을 도와주는 매우 유용한 위젯입니다. 스택은 자식 위젯들을 수직 또는 수평으로 정렬할 수 있는데, 이렇게 정렬하는 방법에 대해 알아보겠습니다.

수평 정렬

수평으로 정렬하기 위해서는 Row 위젯을 사용합니다. Row 위젯은 자식 위젯들을 가로로 배열하며, 추가된 순서대로 정렬됩니다.

Row(
  mainAxisAlignment: MainAxisAlignment.spaceEvenly, // 자식 위젯들을 균등한 간격으로 정렬
  children: [
    Text('위젯 1'),
    Text('위젯 2'),
    Text('위젯 3'),
  ],
)

위의 예제에서 Row 위젯은 Text 위젯들을 가로로 정렬하고, 각 위젯들은 동일한 간격으로 정렬됩니다.

수직 정렬

수직으로 정렬하기 위해서는 Column 위젯을 사용합니다. Column 위젯은 자식 위젯들을 세로로 배열하며, 추가된 순서대로 정렬됩니다.

Column(
  mainAxisAlignment: MainAxisAlignment.spaceEvenly, // 자식 위젯들을 균등한 간격으로 정렬
  children: [
    Text('위젯 1'),
    Text('위젯 2'),
    Text('위젯 3'),
  ],
)

위의 예제에서 Column 위젯은 Text 위젯들을 세로로 정렬하고, 각 위젯들은 동일한 간격으로 정렬됩니다.

정렬 방식 변경하기

Row 또는 Column 위젯의 mainAxisAlignment 속성을 사용하여 정렬 방식을 변경할 수 있습니다. 주요한 정렬 방식은 다음과 같습니다.

• MainAxisAlignment.start: 시작 부분에 정렬
• MainAxisAlignment.end: 끝 부분에 정렬
• MainAxisAlignment.center: 가운데에 정렬
• MainAxisAlignment.spaceBetween: 자식 위젯들 사이를 균등한 간격으로 정렬
• MainAxisAlignment.spaceEvenly: 자식 위젯들을 균등한 간격으로 정렬하되, 양쪽 끝에도 간격을 유지

결론

플러터에서 스택(Stack)을 사용하여 UI 요소들을 수평이나 수직으로 정렬하는 방법을 알아보았습니다. Row 또는 Column 위젯을 사용하여 해당 요소들을 간편하게 정렬할 수 있으며, mainAxisAlignment 속성을 설정하여 다양한 정렬 방식을 선택할 수 있습니다.

더 자세한 내용은 플러터 공식 문서를 참조하시기 바랍니다.