[Flutter] Colum/Row

들어가며

Column/Row 위젯이란?

• Column과 Row 위젯은 각각 수직 방향과 수평 방향으로 자식 위젯을 배치하는 데 사용된다.
• 다른 위젯을 배열하여 복잡한 레이아웃을 만드는 데 사용된다.

ColumnRow 속성

• mainAxisAlignment: 자식 위젯이 주축(main axis)을 따라 정렬될 때 사용되는 방법을 지정
  • MainAxisAlignment.start: 주축의 시작 부분에 정렬
  • MainAxisAlignment.center: 주축의 중앙에 정렬
  • MainAxisAlignment.end: 주축의 끝 부분에 정렬
  • MainAxisAlignment.spaceEvenly: 자식 위젯 사이에 동일한 간격을 유지하면서 공간을 균등하게 분배
  • MainAxisAlignment.spaceBetween: 첫 번째와 마지막 자식 위젯은 컨테이너의 시작 부분과 끝 부분에 분산되고, 중간의 자식 위젯들은 균일하게 분산
  • MainAxisAlignment.spaceAround: 모든 자식 위젯 주위에 공간을 균등하게 분배하며, 컨테이너의 시작 부분과 끝 부분에는 절반의 공간이 배정
• crossAxisAlignment: 자식 위젯이 교차축(cross axis)을 따라 정렬될 때 사용되는 방법을 지정
  
  • CrossAxisAlignment.start: 교차축의 시작 부분에 정렬
  • CrossAxisAlignment.center: 교차축의 중앙에 정렬
  • CrossAxisAlignment.end: 교차축의 끝 부분에 정렬
  • CrossAxisAlignment.stretch: 자식 위젯이 교차축을 따라 확장
• mainAxisSize: 주축(main axis)의 크기를 결정하는 방법을 지정
  
  • MainAxisSize.min: 자식 위젯들이 최소한의 공간을 차지
  • MainAxisSize.max: 주축의 최대 가능한 공간을 사용

예제

main.dart

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Column and Row Example',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Column and Row Example'),
        ),
        body: Center(
          child: Column(
            // 영역 내에서 가운데 배치
            // mainAxisAlignment: MainAxisAlignment.center,

            // 영역 내에서 자식들간 동일한 간격으로 배치
            // mainAxisAlignment: MainAxisAlignment.spaceBetween,

            // 영역 자체를 컨텐츠 사이즈만큼 최소화
            // mainAxisSize: MainAxisSize.min,

            // 자식 정렬 순서
            // verticalDirection: VerticalDirection.up,

            // 오른쪽 정렬
            // crossAxisAlignment: CrossAxisAlignment.end,

            // 자식들 사이즈를 가로방향으로 꽉 채우고싶으면 아래설정 + 자식들의 width 설정 제거
            // crossAxisAlignment: CrossAxisAlignment.stretch,

            children: [
              Container(
                width: 100,
                height: 100,
                color: Colors.white,
                child: Text('Container 1'),
              ),
              Container(
                width: 200,
                height: 100,
                color: Colors.blue,
                child: Text('Container 2'),
              ),
              Divider(
                height: 60.0,
                color: Colors.grey[850],
                thickness: 0.5,
                indent: 30.0,
                endIndent: 30.0,
              ),
              Container(
                width: 100,
                height: 100,
                color: Colors.red,
                child: Text('Container 3'),
              ),
              SizedBox(
                height: 30.0,
              ),
              Container(
                width: double.infinity,
                height: 20,
                color: Colors.teal,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

화면