플러터 순한맛 강좌 - 컬럼 위젯과 로우 위젯 되짚어 보기

다음 코드는 코딩셰프의 수업을 기반으로 작성한 코드입니다.
플러터(flutter) 순한맛 강좌 21 | 컬럼 위젯(Column widget)과 로우 위젯(Row widget) 되짚어 보기

아래의 코드는 설명이 충분치 않기에 만약 스스로 레이아웃에 대해서 추가로 공부하고 싶다면 아래의 글을 참조하는게 좋다.
Flutter Layout Cheat Sheet

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Column and Row ',
      theme: ThemeData(
        primarySwatch: Colors.red,
      ),
      home: MyPage(),
    );
  }
}

class MyPage extends StatelessWidget {
  const MyPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.teal,
      body: SafeArea(
        child: Row( // row와 column 모두 서로 특징들이 동일하게 적용된다.
          // column은 세로는 차지 가능한 모든 공간을 차지하지만 가로는 지정된 크기만 차지한다.
          // mainAxisAlignment: MainAxisAlignment.center,  // 가운데 정렬 시켜줌
          // mainAxisSize: MainAxisSize.min, // column의 세로 차지하는 공간을 제한시킴
          // verticalDirection: VerticalDirection.up,  // 쌓아올리는 느낌
          // verticalDirection: VerticalDirection.down,  // 아래에서 내려가는 느낌
          // mainAxisAlignment: MainAxisAlignment.spaceEvenly, // 시작은 간격으로 시작, 일정 간격으로 정렬
          // mainAxisAlignment: MainAxisAlignment.spaceBetween,  // 양끝을 기준으로 간격 나눔
          // crossAxisAlignment: CrossAxisAlignment.end, // 가로축 끝에 맞추어서 정렬
          // crossAxisAlignment: CrossAxisAlignment.stretch, // 가로 끝까지 그림을 맞춤, width 있어도 적용은 되는데 지워주는게 좋음
          children: [
            Container(
              width: 100,
              height: 100,
              color: Colors.white,
              child: Text('Container 1'),
            ),
            SizedBox(
              width: 30.0,
            ),
            Container(
              width: 100,
              height: 100,
              color: Colors.blue,
              child: Text('Container 2'),
            ),
            Container(
              width: 100,
              height: 100,
              color: Colors.red,
              child: Text('Container 3'),
            ),
            // Container(
            //   width: double.infinity, // 갈 수 있는데 까지 가로축으로 끝까지 확장하라는 뜻
            // )
          ],
        ),
      ),
    );
  }
}