[Flutter] 레이아웃 학습 2편 Column / Row 실습

Column / Row는 옵션으로 childen을 갖는다. (복수)

Container는 옵션으로 child를 갖는다. (단수)

 

DartPad : https://dartpad.dartlang.org/

DartPad

 

1. Column 기본

Column의 아이들은 위에서 아래로 배치된다.

아무런 옵션이 없는 상태에서 확인해보자.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context){
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Hello YoungMap'),
        ),
        body: Column(
          children: [
            Text("아이1"),
            Text("아이222"),
            Text("아이333333"),
          ],
        ),
      ),
    );
  }
}

2. Axis 축 옵션

mainAxisAlignment는 화면 세로축을 기준으로 하는 옵션이다.

center를 넣으면 가운데 위치한다.

body: Column(
  mainAxisAlignment: MainAxisAlignment.center,
  children: [
    Text("아이1"),
    Text("아이222"),
    Text("아이333333"),
  ],
),

이번에는 CrossAxisAlignment 가로축에 대한 옵션을 추가해보자.

end를 넣으면 자식들 가장 마지막 기준으로 정렬한다.

body: Column(
  mainAxisAlignment: MainAxisAlignment.center,
  crossAxisAlignment: CrossAxisAlignment.end,
  children: [
    Text("아이1"),
    Text("아이222"),
    Text("아이333333"),
  ],
),

3. Row 기본

Row는 자식들이 왼쪽에서 오른쪽으로 배치된다.

body: Row(
  children: [
    Text("자식1"),
    Text("자식222"),
    Text("자식333333"),
  ],
),

동일하게 축 옵션을 줄 수 있다.

body: Row(
  mainAxisAlignment: MainAxisAlignment.center,
  children: [
    Text("자식1"),
    Text("자식222"),
    Text("자식333333"),
  ],
),