[Flutter] Column or Row 에 Container 여러개 배치 및 정렬

기존에 하나의 Container만 표시했다면

Column에서 children Widget을 활용하여 여러개의 Container를 배치가능.

mainAxisAlignment: MainAxisAlignment.end 를 활용하여 끝에 정렬 가능하고 start, center, end, spaceEvenly 등등.

 

수직으로 배열중에 각기 다른 콘테이너를 수평방향으로 정렬하고 싶다면

crossAxisAlignment: CrossAxisAlignment.end, 를 추가하여 수평방향으로 정렬가능. (아래 2개 사진 참조)

하나의 팁은 만약에 우측끝에 정렬하고 싶다면 밑에 안보이는 Container를 하나 만든 후 정렬하면

 

또한, 화면을 수평으로 가득 채우고 싶으면

crossAxisAlignment: CrossAxisAlignment.stretch,를 사용하여 컨테이너 늘릴수있음.

Container들 사이에 간격을 띄우고 싶으면 정렬로도 할수 있지만, 그냥 SizedBox()를 추가해도됨.

Row도 같은 형식으로 사용하면 됨.