[Flutter] Row, Column 컨텐츠 크기에 맞추기

Row, Column 의 경우 기본적으로 mainAxis를 기준으로 화면 전체크기를 차지하도록 되어 있습니다.

Row와 Column 위젯의 코드를 보면 mainAxisSize가 max로 되어 있기 때문입니다.

 

MainAxisSize mainAxisSize = MainAxisSize.max

 

간단한 Column 예제입니다.

 

body: Container(
  color: Colors.yellow,
  child: Column(
    mainAxisAlignment: MainAxisAlignment.center,
    children: [
      const Text('My', style: TextStyle(fontSize: 40),),
      const SizedBox(height: 20,),
      Obx(() =>
          Text(bottomIndexController.currentIndex.value.toString(),
            style: const TextStyle(fontSize: 30),)),
    ],
  ),
),

 

 

Column의 크기를 따로 지정하지 않았지만 화면 전체를 차지하고 있는 것을 볼 수 있습니다.

특히나 다이얼로그에서 Column을 사용하면 화면 전체 다이얼로그가 차지하는 당황스러운 모습을 볼 수 있죠.

 

Column의 크기를 조절하지 않으면 최대의 길이를 보여줍니다

 

그럼 컨텐츠의 Row와 Column에서 mainAxis의 크기를 컨텐츠의 크기에 맞추는 방법은 다음와 같습니다.

 

mainAxisSize: MainAxisSize.min,

 

 

Column의 크기가 컨텐츠의 크기에 맞게 조정된 것을 볼 수 있습니다.

참조용 코드입니다.

 

body: Container(
  color: Colors.yellow,
  child: Column(
    mainAxisAlignment: MainAxisAlignment.center,
    mainAxisSize: MainAxisSize.min,
    children: [
      const Text('My', style: TextStyle(fontSize: 40),),
      const SizedBox(height: 20,),
      Obx(() =>
          Text(bottomIndexController.currentIndex.value.toString(),
            style: const TextStyle(fontSize: 30),)),
    ],
  ),
),