Widget Tree, MainAxisAlignment, CrossAxisAlignment

Widget Tree

Widget들의 부모, 자식 관계

 

 

MainAxisAlignment

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        bottom: false,
        child: Container(
          color: Colors.black,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.end,
            children: [
              Container(
                color: Colors.red,
                width: 50.0,
                height: 50.0,
              ),
              Container(
                color: Colors.orange,
                width: 50.0,
                height: 50.0,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

MainAxisAlignment: 주축 정렬
            // start: 시작 -> 기본 값
            // end: 끝
            // center: 가운데
            // spaceBetween: 위젯과 위젯 사이 동일하게 배치
            // spaceEvenly: 위젯 사이 동일하게 배치, 끝과 끝에도 빈 간격으로 시작
            // spaceAround: spaceEvenly + 끝과 끝 간격은 1/2

 

 

CrossAxisAlignment

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        bottom: false,
        child: Container(
          color: Colors.black,
          width: MediaQuery.of(context).size.height,
          child: Row(
            mainAxisAlignment: MainAxisAlignment.start,
            // CrossAxisAlignment: 반대축 정렬
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Container(
                color: Colors.red,
                width: 50.0,
                height: 50.0,
              ),
              Container(
                color: Colors.orange,
                width: 50.0,
                height: 50.0,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

            // start: 시작
            // end: 끝
            // center: 가운데 -> 기본 값

            // strech: 최대한으로 늘림