[flutter] Row, Column 정렬 mainAxisAlignment, crossAxisAlignment

키보드르륵 2024. 5. 7. 23:21

Row, Column Widget의 경우 children에 포함된 Widget을 정렬을 위해 mainAxisAlignment, crossAxisAlignment를 사용한다.

mainAxisAlignment의 경우 주축이라는 의미를 가지고 있고 crossAxisAlignment의 경우 횡축 이라는 의미를 가지고 있는데 해당 의미만을 보면 무슨 말인지 이해를 할 수 없어 코드로 살펴보도록 하자.

아래 stackoverflow에 정리된 내용을 먼저 보기를 권한다.

Flutter crossAxisAlignment vs mainAxisAlignment

I'm confused about crossAxisAlignment and mainAxisAlignment. Can anyone please explain it in simple words?

stackoverflow.com

Row 정렬 사용법

mainAxisAlignment - 가로 정렬의 방법

1. start의 경우 화면의 왼쪽부터 항목을 정렬
mainAxisAlignment : MainAxisAlignment.start
2. end의 경우 화면의 오른쪽부터 항목을 정렬
mainAxisAlignment : MainAxisAlignment.end

3. center의 경우 화면의 중앙에 항목을 정렬

mainAxisAlignment : MainAxisAlignment.center

4. spaceEvenly의 경우 widget 사이의 여유공간은 동일하게 배분하여 정렬

mainAxisAlignment : MainAxisAlignment.spaceEvenly

5. spaceBetween의 경우 widget을 시작과 끝에 정렬하고 나머지 widget을 동일하게 배분하여 정렬

mainAxisAlignment : MainAxisAlignment.spaceBetween

6. spaceAround의 경우 widget을 시작과 끝을 여유공간의 반으로 하고 나머지 widget은 여유공간만큼 정렬

mainAxisAlignment : MainAxisAlignment.spaceAround

crossAxisAlignment - 세로 정렬의 방법

1. start의 경우 가장 위쪽에서 시작하여 정렬

crossAxisAlignment: CrossAxisAlignment.center

2. end의 경우 가장 아래쪽에서 시작하여 정렬

crossAxisAlignment: CrossAxisAlignment.end

3. center의 경우 화면의 중앙 정렬

crossAxisAlignment: CrossAxisAlignment.center

4. stretch의 경우 화면의 시작부터 끝까지 늘림

crossAxisAlignment: CrossAxisAlignment.stretch

Row(
        mainAxisAlignment: MainAxisAlignment.start,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Container(
            width: 100,
            height: 100,
            child: Text('Row1'),
            decoration: BoxDecoration(
              color: Colors.yellow,
              border: Border.all(color: Colors.black)
            ),
          ),
          Container(
            width: 100,
            height: 100,
            child: Text('Row2'),
            decoration: BoxDecoration(
                color: Colors.yellow,
                border: Border.all(color: Colors.black)
            ),
          ),
          Container(
            width: 100,
            height: 100,
            child: Text('Row3'),
            decoration: BoxDecoration(
                color: Colors.yellow,
                border: Border.all(color: Colors.black)
            ),
          ),
        ],
      ),