[flutter] 플러터 Row 위젯 소개

07 Dec 2023

flutter

플러터에서 Row 위젯은 수평으로 자식 위젯들을 정렬하여 나타낼 수 있는 간단하면서도 유용한 위젯입니다. 이번 블로그에서는 플러터 Row 위젯의 기능과 사용 방법을 소개하겠습니다.

Row 위젯 소개

Row 위젯은 플러터에서 가로 방향으로 자식 위젯들을 배열하는 역할을 합니다. 자식 위젯의 크기나 정렬 방향을 설정하여 유연하게 UI를 구성할 수 있습니다.

사용 방법

Row 위젯을 사용하기 위해서는 다음과 같은 단계를 따르면 됩니다.

Row 위젯 생성
자식 위젯 추가
옵션 설정 (정렬 방향, 간격 조정 등)

다음은 플러터에서 Row 위젯을 생성하고 사용하는 예시입니다.

Row(
  children: [
    Container(
      color: Colors.red,
      width: 100,
      height: 100,
    ),
    Container(
      color: Colors.blue,
      width: 100,
      height: 100,
    ),
    Container(
      color: Colors.green,
      width: 100,
      height: 100,
    ),
  ],
)

위의 예제는 세 개의 컨테이너를 가로로 배열하여 보여줍니다.

옵션 설정

Row 위젯에서는 다양한 옵션을 설정하여 UI를 조정할 수 있습니다. 몇 가지 주요 옵션에 대해 소개하겠습니다.

mainAxisAlignment: 자식 위젯들의 주 축(main axis) 정렬 방법을 설정합니다. 가장 일반적인 값으로는 start, end, center, spaceBetween, spaceAround, spaceEvenly 등이 있습니다.
crossAxisAlignment: 자식 위젯들의 교차 축(cross axis) 정렬 방법을 설정합니다. 주로 자식 위젯들의 크기가 다를 때 사용됩니다.

예를 들어, 아래와 같이 mainAxisAlignment과 crossAxisAlignment를 설정하여 Row 위젯을 사용할 수 있습니다.

Row(
  mainAxisAlignment: MainAxisAlignment.center,
  crossAxisAlignment: CrossAxisAlignment.start,
  children: [
    Container(
      color: Colors.red,
      width: 100,
      height: 100,
    ),
    Container(
      color: Colors.blue,
      width: 100,
      height: 100,
    ),
    Container(
      color: Colors.green,
      width: 100,
      height: 100,
    ),
  ],
)

위 예제에서 mainAxisAlignment을 center로 설정하여 주 축 가운데 정렬을 하고, crossAxisAlignment를 start로 설정하여 교차 축 위쪽 정렬을 합니다.

결론

위에서 소개한 대로 플러터의 Row 위젯은 수평으로 자식 위젯을 정렬하여 UI를 만들 수 있는 강력한 기능을 제공합니다. 이를 활용하여 다양한 유형의 UI를 구현해보세요.

더 자세한 내용은 Flutter 공식 문서를 참고하시기 바랍니다.

Happy coding with Flutter! :rocket: