본문 바로가기
공부방/Flutter

[Flutter] mainAxisAlignment함수(위젯)

by SmartCow 2024. 3. 6.

1. mainAxisAlignment함수(위젯)이란?

 자식 위젯을 주축(main axis)을 따라 정렬하는 데 사용. Row나 Column과 같은 레이아웃 위젯 내에서 자식 위젯들을 정렬할 때 유용하게 활용됨.

2. 옵션

1) MainAxisAlignment.start
주축의 시작 부분에 자식 위젯을 정렬.
2) MainAxisAlignment.end
주축의 끝 부분에 자식 위젯을 정렬.
3) MainAxisAlignment.center
주축의 가운데에 자식 위젯을 정렬.
4) MainAxisAlignment.spaceBetween
자식 위젯 사이에 동일한 간격을 유지하면서 주축을 채운다.
5) MainAxisAlignment.spaceAround
자식 위젯 주위에 공간을 고르게 배분하여 주축을 채운다.
6) MainAxisAlignment.spaceEvenly
시작과 끝 부분을 포함하여 자식 위젯 주위에 공간을 고르게 배분하여 주축을 채운다.

3. 예시

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

가로 방향으로 3개의 컨테이너를 생성하고, 이를 Row 위젯을 사용하여 가로로 나란히 배치한다.
MainAxisAlignment.center를 사용하므로 컨테이너들은 Row의 중앙에 위치하게 된다.