MainAxisSize

Row와 Column 위젯에서 mainAxisSize 속성은 주 축(main axis)의 크기를 어떻게 결정할 것인지를 지정합니다. Row의 주 축은 수평(horizontal)이고, Column의 주 축은 수직(vertical)입니다. mainAxisSize 속성은 MainAxisSize.min과 MainAxisSize.max 두 가지 옵션이 있습니다.

MainAxisSize.min

• Row 또는 Column에 포함된 자식들이 필요한 공간만큼만 차지합니다.
• 즉, 모든 자식 위젯들의 크기 합만큼의 공간을 차지하고, 추가 공간은 활용하지 않습니다.

MainAxisSize.max

• Row 또는 Column이 가능한 모든 공간을 차지하도록 확장됩니다.
• 즉, 부모 위젯이 허용하는 최대 공간을 채우려고 합니다.

Row와 Column의 예시

Row with MainAxisSize.min

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(home: MyHomePage()));
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Row(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            Icon(Icons.star, size: 50),
            Icon(Icons.star, size: 50),
            Icon(Icons.star, size: 50),
          ],
        ),
      ),
    );
  }
}

이 예시에서 Row는 세 개의 아이콘을 가로로 배치하며, 필요한 공간만 사용합니다.

Row with MainAxisSize.max

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(home: MyHomePage()));
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Row(
          mainAxisSize: MainAxisSize.max,
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: <Widget>[
            Icon(Icons.star, size: 50),
            Icon(Icons.star, size: 50),
            Icon(Icons.star, size: 50),
          ],
        ),
      ),
    );
  }
}

이 예시에서 Row는 가능한 모든 수평 공간을 차지하며, 자식 아이콘들은 공간을 균등하게 나누어 가집니다.

Column with MainAxisSize.min and MainAxisSize.max

Column의 사용법도 Row와 유사합니다. Column은 수직 방향의 공간을 어떻게 채울지 mainAxisSize에 따라 결정됩니다. MainAxisSize.min은 필요한 공간만 사용하고, MainAxisSize.max는 가능한 모든 수직 공간을 차지하려 합니다.

이 속성들을 이해하고 사용하면, Flutter에서 위젯의 레이아웃을 보다 세밀하게 제어할 수 있습니다.

Row와 Column 위젯에서 MainAxisSize 속성은 위젯이 주 축(main axis)에 따라 어떻게 확장될지를 결정합니다. Row의 주 축은 수평 방향이고, Column의 주 축은 수직 방향입니다. MainAxisSize에는 두 가지 옵션이 있습니다: MainAxisSize.min과 MainAxisSize.max.

MainAxisSize의 기본값

• Row와 Column 모두에서 MainAxisSize의 기본값은 MainAxisSize.max입니다.

이 기본 설정은 Row 또는 Column이 부모 위젯이 제공하는 최대 공간을 채우도록 합니다. 즉, 이 설정을 사용하면 Row는 수평 방향으로, Column은 수직 방향으로 가능한 한 많은 공간을 차지하려고 합니다. 이는 해당 위젯들이 더 큰 컨테이너 내에서 더 많은 레이아웃 공간을 확보하려고 할 때 유용합니다.

예시

Row(
  // 여기서 MainAxisSize.max는 기본값입니다.
  children: <Widget>[
    Icon(Icons.star, size: 50),
    Icon(Icons.star, size: 50),
    Icon(Icons.star, size: 50),
  ],
)

이 Row는 자식 위젯들을 포함하기에 충분한 최대 수평 공간을 차지합니다. MainAxisSize.max 덕분에, 자식들이 균등하게 분포하거나, mainAxisAlignment 속성을 사용하여 공간 분배를 조정할 수 있습니다.

Column(
  // 여기서도 MainAxisSize.max가 기본값입니다.
  children: <Widget>[
    Text("Hello"),
    Text("World"),
  ],
)

이 Column은 자식 위젯들을 포함하기에 충분한 최대 수직 공간을 차지합니다. 부모 컨테이너의 높이에 맞춰 최대한 확장되며, 필요에 따라 자식들 사이의 간격을 조절할 수 있습니다.

사용 이유

MainAxisSize.max가 기본값인 이유는, 대부분의 UI 디자인에서 위젯이 할당된 공간을 완전히 사용하는 것이 일반적이기 때문입니다. 이렇게 함으로써 개발자는 추가적인 레이아웃 제약 없이, 보다 일관된 UI를 설계할 수 있습니다. 필요한 경우, MainAxisSize.min을 명시적으로 설정하여 공간 사용을 최소화할 수도 있습니다.