[Flutter][Widget] Row, Column 위젯

[Flutter][Widget] Row, Column 위젯Develop/Flutter2024. 3. 24. 18:57@노근

Table of Contents

개요

Flutter에서 하나의 위젯을 배치하는 것은 굉장히 쉽다.

오버라이드된 `build` 메소드의 `return`에 위젯 클래스를 반환해주면 위젯을 쉽게 렌더링할 수 있다. (물론 그 과정은 굉장히 추상적이고 복잡하겠지만...)

"그렇다면 여러 개의 위젯을 배치하고 싶을 때는 어떻게 해야하지?"

`return` 에는 하나의 위젯만 반환시킬 수 있고, 반환 타입마저도 `List<Widget>`이 아니라서 여러 개의 위젯을 반환하는 것은 사실상 불가능하다.

"그럼 뭐 불가능하다는거야 뭐야?"

불가능했다면 Flutter는 이 세상에 나오지 못햇을 것이다... 당연히 가능하며, 이를 도와주는 것은 Multichild-Layout Widget들이다.

Multichild-Layout Widget에는 `Row`, `Column`, `Stack`과 같은 위젯들이 존재하며, 이번에 볼 것은 그 중 가장 많이 사용되는 `Row`와 `Column`이다.

Row

Row란?

먼저 `Row`부터 보자.

행과 열, `Row`는 그 중 행을 뜻한다.

행과 열이라고 하면 헷갈릴 수 있어 단번에 알아듣기 쉽게 설명하면, Row는 가로 배치를 도와주는 위젯이다.

정말 말 그대로 핸드폰 화면의 가로축 방향으로 위젯을 진열해준다.

사용 예시

아래와 같이 `children` 프로퍼티에 위젯 리스트를 넣어주면, 가로로 진열이 된다. ▼

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

이렇게 두 사각형이 가로로 진열된 것을 볼 수 있다. ▼

Row 위젯의 프로퍼티들

Row 위젯의 프로퍼티는 생각보다 많지 않다.

많지 않은데 그 중에서도 `children`, `mainAxisAlignment`, `crossAxisAlignment` 정도만 사용한다.

하나씩 보도록 하자.

children

앞의 예시에서 사용된 프로퍼티로 `List<Widget>`을 받는다.

다른 프로퍼티들과는 다르게 `required`, 즉 필수 프로퍼티로 받아서 꼭 넣어줘야한다.

어떤 위젯도 들어갈 수 있지만, 만약에 내부에 들어간 위젯의 크기가 커지면 오버플로우가 나게 된다. ▼

mainAxisAlignment와 crossAxisAlignment

AxisAlignment
AxisAlignment는 축 정렬이란 뜻이기에, mainAxisAlignment는 주 축 정렬, crossAxisAlignment는 교차 축 정렬로 생각하면 쉽다.

Row의 mainAxis는 가로다.

그렇기에 `mainAxisAlignment`는 가로 축 정렬을 의미하고 `crossAxisAlignment`는 세로 축 정렬을 의미한다.

각각 `MainAxisAlignment`와 `CrossAxisAlignment` enum을 받는다.

`MainAxisAlignment`에는 `center`, `end`, `spaceAround`, `spaceBetween`, `spaceEvenly`, `start`가 있다. ▼

`CrossAxisAlignment`에는 `center`, `end`, `start`, `stretch`, `baseline`이 있다. ▼

이에 대한 설명은 아래에서 하겠다. Column에도 적용되는 이야기이기 때문이다.

이 두 값에 아무것도 넣지 않는다면 기본으로 `MainAxisAlignment`에는 `MainAxisAlignment.start`가, `CrossAxisAlignment`에는 `CrossAxisAlignment.center`가 들어가게 된다.

Column