[Flutter] Row & Column 기본 익히기 MainAxisAlignment, CrossAxisAlignment 옵션들 차이 | Expanded widget, Flexible widget

 

[Flutter] Row & Column 위젯 

• Row: 가로
• Column:  세로

 

• MainAxisAlignment: 주축
• CrossAxisAlignment: 반대축

 
// 디폴트 속성
Row, Column위젯의
주축은 최대 크기를 차지하고 (스크린 전체 폭/너비)
반대축은 최소 크기를 차지한다. (자식 위젯의 크기)
 

MainAxisAlignment 옵션

• start : 주축의 시작에 정렬한다
• end : 끝
• center : 중앙
• spaceBetween : 주축에서 위젯들 사이에 동일한 간격을 두고 정렬
• spaceAround : 주축에서 위젯들 주변에 동일한 간격을 두고 정렬
• spaceEvenly : 주축에서 위젯들 앞뒤 및 사이에 동일한 간격을 두고 정렬

CrossAxisAlignment 옵션

• start
• end
• center
• stretch : 반대축으로 위젯들을 최대로 확장
• baseline : 텍스트 기준선이 기준

 

Expanded 위젯

• flex: 1 (디폴트)

 

Flexible 위젯

• fit: FlexFit.tight -> Expanded 위젯과 동일
• fit: FlexFit.loose -> 내부 위젯이 배정된 사이즈만 차지

 

// Dart

import 'package:flutter/material.dart';
import 'package:row_and_column/const/colors.dart';

class HomeScreen extends StatelessWidget {
  const HomeScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Container(
          color: Colors.white,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: [
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: colors.map((e) =>
                    Container(
                        height: 50,
                        width: 50,
                        color: e,
                    )
                ).toList(),
              ),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceAround,
                children: colors.map((e) =>
                    Container(
                      height: 50,
                      width: 50,
                      color: e,
                    )
                ).toList(),
              ),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: colors.map((e) =>
                    Container(
                      height: 50,
                      width: 50,
                      color: e,
                    )
                ).toList(),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

 

css를 할 때도 항상 이 옵션들이 헷갈렸는데
이 참에 그림으로 확실히 기억해두려 한다.

MainAxisAlignment 의 옵션들이 설명으로만 보면 헷갈려서 그림으로 보면 구분하기 좋다.
참고하시길~!