저번 시간에 컨테이너에 대해서 소개하였다.
요번 시간에는 컨테이너 다음으로 기본으로 많이 사용되는 Column을 배우도록 하겠다.
참조문헌
https://api.flutter.dev/flutter/widgets/Column-class.html
Column class - widgets library - Dart API
A widget that displays its children in a vertical array. To cause a child to expand to fill the available vertical space, wrap the child in an Expanded widget. The Column widget does not scroll (and in general it is considered an error to have more childre
api.flutter.dev
기본적으로 컨테이너는 한 개의 영역만을 표시하였다.
이렇게 되면 앱을 만드는데 너무 제한적일 것이다. 때문에 나온 것이 컬럼 위젯이다.
1. 컬럼 위젯 기본 구성 설명
컬럼은 말 그대로 열로 해석되기 때문에 기본적으로 아래로 생성이 된다.
2. 컬럼 위젯의 mainAxisAligment 함수
mainAxisAligment는 컬럼의 방향에서 아들들의 위치를 결정하는 함수이다.
해당하는 부분에서 나 같은 경우는 Center를 줬기 때문에 가운데로 옮겨진 것을 확인할 수 있을 것이다.
이외에도 여러 가지 함수가 있는데, 직접 사용해보고 Column의 방향으로 어떻게 이동되는지 숙지하길 바란다.
3. 컬럼 위젯의 crossAxisAlignment 함수
crossAxisAlignment는 컬럼의 반대방향에서 아들들의 위치를 결정하는 함수이다.
해당하는 부분에서 나 같은 경우는 CrossAxisAlignment.end로 끝부분으로 지정해줬기 때문에 2번째에 넓이 100 기준으로 맨 끝으로 이동되는 것을 확인할 수 있다.
여기서 중요한 부분은 자식들의 끝 기준으로 정렬된다는 점이다.
해당하는 부분을 깜박하는 경우가 발생하는데, 잊지 말아야 된다.
예를 들어 아래의 예시를 보자
해당하는 화면에서 어떻게 자식들이 우측으로 갔을까? 이유는 간단하다.
4 번제 컨테이너가 넓이를 infinity로 꽉 채우게 주었기 때문에 자식들 중에 기준이 제일 넓은 기준으로 끝으로 가게 된 것이다.
해당하는 영역(double.infinity)에 다시 색상과 높이를 주면 위와 같이 나온다.
'플루터' 카테고리의 다른 글
| Flutter Chapter-02-05 내 정보 만들기 (0) | 2022.01.14 |
|---|---|
| Flutter Chapter-02-04 내 정보 만들기 Row 익히기 (0) | 2022.01.13 |
| Flutter Chapter-02-02 내 정보 만들기 Container 익히기 (0) | 2022.01.13 |
| Flutter Chapter-02-01 내 정보 만들기 StatelessWidget 익히기 (0) | 2022.01.12 |
| Flutter Chapter-01-05 연습문제 작성 (0) | 2022.01.11 |