[The Complete Flutter Development Bootcamp with Dart] 2 container, column, row

컨테이너는 자식이 하나일 때 쓴다(child)

자식이 여러개 일 때는 column이나 row를 사용한다

 

MaterialApp(
home: Scaffold(
	backgroundColor: Colors.teal,
  body: SafeArea(
    child: Column(
    	children: <Widget>[
        Container(),
        Container(),
      ]
    )
  )
))

 

 

자식이 없는 컨테이너는 최대한 넓은 영역을 차지하려고 한다

(만약 크기를 제한하는 width, height 등이 있다면 그에 맞는 최소한의 영역을 차지한다

자식이 있다면 자식의 크기에 컨테이너의 크기를 맞춘다

 

column(
  mainAxisSize: MainAxisSize.min, //컬럼이 자식들에 맞는 사이즈로..
  verticalDirection: VerticalDirection.up,
  mainAxisAlignment: MainAxisAlignment.end,
  crossAxisAlignmen: CrossAxisAlignment.end,
)

 

VerticalDirection은 down이 기본값이다

down인 경우에는 

1

2

3

이지만 up인 경우에는

3

2

1

순서가 된다

 

MainAxisAlignment는 start가 기본값

start, center, end, spaceEvenly, spaceBetween

start는 상단, end는 하단 배치

spaceEvenly는 맨 위랑 아래애도 공간이 있다

이는 column이라 y축이 기준이 되는 것이고 row면 x축이 기준이 된다

 

crossAxisAlignment는 start가 기본값

start, center, end, spaceEvenly, spaceBetween

end는 자식들 중 가장 길이가 긴 자식을 기준으로 그 자식의 오른쪽 끝과 맞춘다

column이면 x축 기준, row면 y축 기준이다

전체 화면의 오른쪽 끝으로 가게 하고 싶다면

1. 새로운 자식 container를 생성해서

2. width: double.infinity, height: 10.0을 준다

 

자식들 각각의 width를 double.infinity로 설정하거나

CrossAxisAlignment.stretch를 하면

width를 무시하고 자식들이 화면의 전체 너비를 차지한다

+ 자식들 사이에 SizedBox(height:20.0)을 삽입하여 갭을 줄 수 있다

    column이라 height만 설정한 것!

    row면 width만 설정한다

+ stretch로 너비 전체를 가지기 때문에 width 설정은 먹히지 않는다