위젯 정렬 - 전체 채우기, 좌측 상단 정렬

 

📌 Flutter에서 자식 위젯을 "전체 확장 + 좌측 상단 정렬"하는 방법 총정리

Flutter에서 자식 위젯을 부모 위젯의 전체 크기를 채우면서, 동시에 좌측 상단에 정렬시키려면 다음과 같은 위젯과 속성들을 적절히 조합해야 합니다.

---

✅ 자식 위젯이 부모 영역을 가득 채우는 방법

위젯/속성	용도	설명	예시
SizedBox.expand()	전체 확장	부모의 최대 크기로 확장	child: SizedBox.expand(child: ...)
Container	전체 확장	width/height를 double.infinity로 설정	Container(width: double.infinity, height: double.infinity, child: ...)
Expanded	Row, Column에서 확장	주축 방향 전체 공간 차지	Row(children: [Expanded(child: ...)])
Flexible	Row, Column에서 유연한 확장	Expanded보다 유연	Flexible(fit: FlexFit.tight, child: ...)
crossAxisAlignment: CrossAxisAlignment.stretch	교차축 확장	Column/Row 내 자식들을 교차축 방향으로 확장	Column(crossAxisAlignment: CrossAxisAlignment.stretch, children: [...])

---

✅ 자식 위젯을 좌측 상단 정렬하는 방법

위젯/속성	용도	설명	예시
Align	정렬 위치 지정	alignment: Alignment.topLeft로 좌측 상단 위치	Align(alignment: Alignment.topLeft, child: ...)
Container	내부 정렬	alignment: Alignment.topLeft 사용 가능	Container(alignment: Alignment.topLeft, child: ...)
Stack + Positioned	절대 위치 배치	좌측 상단에 정밀 배치	Stack(children: [Positioned(top: 0, left: 0, child: ...)])
Column / Row 기본 동작	기본 좌상단 시작	별도 정렬 지정 없으면 자동 좌측 상단 시작	Column(children: [...])

---

🧩 조합 예시: 전체 확장 + 좌측 상단 정렬

import 'package:flutter/material.dart';

class FullSizeTopLeftWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SizedBox.expand(
        child: Align(
          alignment: Alignment.topLeft,
          child: Container(
            width: 100,
            height: 100,
            color: Colors.blue,
            child: Text('좌측 상단'),
          ),
        ),
      ),
    );
  }
}

📎 설명:

• SizedBox.expand: 부모 영역 전체 사용
• Align(alignment: Alignment.topLeft): 자식을 좌상단에 정렬
• Container: 테스트용 사각형 영역

---

🔍 추가 팁

항목	용도	예시
MainAxisAlignment	Row/Column 내 주축 정렬	mainAxisAlignment: MainAxisAlignment.start
CrossAxisAlignment	교차축 정렬	crossAxisAlignment: CrossAxisAlignment.start
Spacer, SizedBox	간격 확보	SizedBox(height: 20)
LayoutBuilder	부모 크기에 따른 반응형 레이아웃	LayoutBuilder(builder: (context, constraints) => ...)

필요 시 Row/Column 내에서 정렬하거나, Stack과 Positioned로 절대 위치를 잡아 정밀 제어하는 것도 고려하세요.