[2023.11.26] 플러터(flutter) 순한 맛 강좌 21 | Column & Row

<< 소스 코드 >>

import 'package:flutter/material.dart';
import 'package:fluttertoast/fluttertoast.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Snack Bar',
      theme: ThemeData(
        primarySwatch: Colors.blue
      ),
      home: MyPage(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.teal, //Scaffold 영역 배경색 지정(블루)
      body: SafeArea( //SafeArea 지정 (화면 상단 시계, 실행 앱, 배터리 표시 영역)
        //Center : 위젯의 가로축(좌우) 기준 중앙 정렬
        child: Row(
          //mainAxisAlignment: 컬럼 위젯의 세로축(상하) 기준 중앙 정렬
          //mainAxisAlignment: MainAxisAlignment.center,
          
          //mainAxisSize: MainAxisSize.min,
          
          //verticalDirection : 위젯을 지정한 방향에서부터 쌓으면서 순서대로 정렬
          //verticalDirection: VerticalDirection.up,
          
          //mainAxisAlignment: 위젯을 동일한 간격으로 정렬
          //mainAxisAlignment: MainAxisAlignment.spaceEvenly,

          //mainAxisAlignment: 위젯을 상하 양끝과 중앙에 정렬
          //mainAxisAlignment: MainAxisAlignment.spaceBetween,

          //crossAxisAlignment: 세로축 위젯의 지정한 영역으로 정렬
          //crossAxisAlignment: CrossAxisAlignment.end, //제일 끝에 정렬

          //crossAxisAlignment: 위젯의 축 사이즈를 끝까지 늘림
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: <Widget>[
            Container(
              width: 100,
              height: 100,
              color: Colors.white,
              child: Text('Container 1'),
            ),
            SizedBox( //위젯 사이 공간을 넣기위해 사용
              //height: 30.0,
              width: 30.0,
            ),
            Container(
              width: 100,
              height: 100,
              color: Colors.blue,
              child: Text('Container 2'),
            ),
            SizedBox( //위젯 사이 공간을 넣기위해 사용
              //height: 30.0,
              width: 30.0,
            ),
            Container(
              width: 100,
              height: 100,
              color: Colors.red,
              child: Text('Container 3'),
            ),
          ],
        ),
      ),
    );
  }
}

 

<< 출력 화면 >>