본문 바로가기
카테고리 없음

[flutter] mainAxisSize - 정렬을 도와주는 코드

by 인턴개구리 2024. 1. 12.

패스트캠퍼스 강의를 들으면서 실습중에, 다음과 같은 현상이 발생했다.

Align(
          alignment: Alignment.bottomRight,
          child: Column(

주황색 버튼의 정렬을 bottonRignt(우측 하단)로 했음에도 불구하고 우측 상단에 배치되어 있다.

Align(
          alignment: Alignment.bottomRight,
          child: Column(
            mainAxisSize: MainAxisSize.min,

강사님이 알려준 해결책은 crossAxisAlignment: CrossAxisAlignment.end를 Column에 삽입하는 것이다.

그러면 아래 사진과 같이 해결이 된다.

그럼에도 선뜻 이해가 가지 않았다. TopRight로 선언하지 않았는데 왜 bottonRight가 되지 않는거지?

Chat GPT 선생 왈

mainAxisSize: MainAxisSize.min은 Column 위젯의 주축(main axis)에서의 크기를 최소화한다는 것을 나타냅니다. 주축은 기본적으로 세로 방향(위에서 아래로)이며, mainAxisSize: MainAxisSize.min을 사용하면 Column의 자식 위젯들이 주축 방향으로 최소한의 공간을 차지하게 됩니다.
여기서는 Column 위젯의 mainAxisSize를 최소로 설정하여, 자식 위젯들이 세로로 최소한의 공간을 차지하도록 하는 것이 목적입니다. 이 코드의 경우, 아래에 있는 "글쓰기" 버튼과 아이콘을 수평으로 정렬하고자 하는데, mainAxisSize: MainAxisSize.min을 사용하면 Column의 자식 위젯들이 세로로 최소한의 공간을 차지하여, 수평 정렬이 가능해집니다.
만약 mainAxisSize를 설정하지 않거나 MainAxisSize.max로 설정하면, Column의 자식 위젯들이 주축 방향으로 가능한 한 많은 공간을 차지하게 되어, 수평 정렬이 어려워집니다.
종합하면, mainAxisSize: MainAxisSize.min은 세로 방향으로 최소한의 공간을 차지하도록 하여, 수평 정렬을 용이하게 만드는 역할을 합니다.

솔직히 아직까지 크게 이해되지는 않는다. 다만 기억해 둬야 할것은, mainAxisSize는 정렬을 용이하게 하는 역할을 한다는 것이다. 무언가 정렬이 안될때는 우선 이 코드를 기억해 내도록 해야겠다.

혹시 제 글을 보시고 더 좋은 설명이 있으시다면 알려주시면 감사하겠습니다.