Flutter Row & Column Widget 사용법 총 정리

Flutter FrameWork는 Row, Column 위젯을 사용해 UI를 구성합니다. 

이번 포스팅에서는 Row, Column 위젯의 정의 및 사용법 그리고 Row, Column 위젯과 관련된 다양한 속성들 mainAxisAlignment, CrossAxisAlignment, mainAxisSize 의 사용법에 대해 정리할 예정입니다. 

 

#0 Row & Column Widget

#0.1 Row Widget

#0.2 Column Widget

💡 Row, Column Widget은 주축을 화면 최대의 크기를 차지한다.

#1 MainAxisAlignment & CrossAixsAlignment

#1.1 MainAxisAlignment

#1.2 CrossAxisAlignment

#2 mainAxisSize

---

#0 Row & Column Widget

#0.1 Row Widget

Row Widget은 가로 방향으로 위젯을 쌓을 때 사용합니다. Row Widget 내부에 들어가는 위젯들은 children 속성 내부에 정의합니다. 

Container Widget child 속성에 Row Widget을 넣어준 뒤, Row Widget children 속성에 50.0 x 50.0 크기를 가지는 세 개의 Container Widget을 넣어 주었습니다.

  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Container(
          color: Colors.black,
          child: Row(
            children: [
              Container(
                color: Colors.blue,
                width: 50.0,
                height: 50.0,
              ),
              Container(
                color: Colors.blueGrey,
                width: 50.0,
                height: 50.0,
              ),
              Container(
                color: Colors.blueAccent,
                width: 50.0,
                height: 50.0,
              ),
            ],
          ),
        ),
      ),
    );
  }

 

코드를 실행해 보면, 다음과 같이 디바이스 화면에 가로 방향으로 Container Widget 들이 쌓여 있는 것을 확인할 수 있습니다.  

 

#0.2 Column Widget

Column Widget은 세로 방향으로 위젯을 쌓을 때 사용합니다. Row Widget과 마찬가지로 children 속성에 Column Widget 내부에 들어갈 위젯들을 정의합니다. 

  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Container(
          color: Colors.black,
          child: Column(
            children: [
              Container(
                color: Colors.blue,
                width: 50.0,
                height: 50.0,
              ),
              Container(
                color: Colors.blueGrey,
                width: 50.0,
                height: 50.0,
              ),
              Container(
                color: Colors.blueAccent,
                width: 50.0,
                height: 50.0,
              ),
            ],
          ),
        ),
      ),
    );
  }

 

마찬가지로 코드를 실행하면 이번에는 반대로 세로 방향으로 Container Widget이 쌓여 있습니다. 

 

💡 Row, Column Widget은 주축을 화면 최대의 크기를 차지한다.

Row, Column Widget은 기본적으로 주축을 화면 최대의 크기를 차지하는 특징을 지니고 있습니다. 

Row Widget은 가로를 기준으로 Widget을 쌓기에, 주축이 가로입니다. 따라서 화면의 가로 공간을 모두 차지합니다. 

Column Widget은 세로를 기준으로 Widget을 쌓기에, 주축이 세로입니다. 따라서 화면의 세로 공간을 모두 차지합니다. 

---

#1 MainAxisAlignment & CrossAxisAlignment

#1.1 MainAxisAlignment

MainAxisAlignment는 주축을 기준으로 요소를 정렬하는 속성입니다. 

Row Widget은 주축이 가로 이므로 가로를 기준으로 요소를 정렬하며, Column Widget은 주축이 세로 이기에 세로를 기준으로 요소를 정렬합니다.

Row, Column Widget 내부에 mainAxisAlignment 속성을 이용해 사용합니다.

	child: Container(
          ...
          child: Row(
            mainAxisAlignment: MainAxisAlignment.[속성],
            ...
          ),
        ),

 

MainAxisAlignment 뒤에 들어갈 속성은 다음과 같습니다. 

mainAxisAlignment: MainAxisAlignment.start // 위젯을 시작 부분에 배치
mainAxisAlignment: MainAxisAlignment.end // 위젯을 끝 부분에 배치
mainAxisAlignment: MainAxisAlignment.center // 위젯을 중간에 배치
mainAxisAlignment: MainAxisAlignment.spaceBetween // 위젯 사이의 간격이 동일하게 배치
mainAxisAlignment: MainAxisAlignment.spaceEvenly // 동일 간격으로 배치하나, 끝 부분이 빈 공간으로 시작

	child: Container(
          ...
          child: Column(
            mainAxisAlignment: MainAxisAlignment.[속성],
            ...
          ),
        ),

 

#1.2 crossAxisAlignment

MediaQuery

crossAxisAlignment 속성에 대해 알아 보기 전에 한 가지 설정해 주어야 할 것이 있습니다. 앞에서 Row, Column Widget은 주축을 화면 최대 크기를 차지한다고 했는데요, 횡축을 기준으로는 요소의 크기 만큼만 차지하기 때문에 횡축의 사이즈를 늘려줄 필요가 있습니다. 

 

횡축을 최대 사이즈만큼 설정하기 위해선 Container의 height, width 속성에 MediaQuery를 사용해야 합니다.

MediaQuery란 Device의 스크린 사이즈를 조절할 때 사용하는 속성으로, MediaQuery.of(Context).size 코드를 사용해 화면의 크기 정보를 가져올 수 있습니다. 

        child: Container(
          ...
          height : MediaQuery.of(context).size.height,
          width: MediaQuery.of(context).size.width,
          ...
        ),

Container의 height, width가 디바이스 화면의 최대만큼 차지

이제 crossAxisAlignment 속성을 사용할 준비를 모두 끝마쳤습니다. 

 

crossAxisAlignment는 횡축을 기준으로 요소를 정렬하는 속성입니다.

Row Widget은 세로를 기준으로, Column Widget은 가로를 기준으로 요소를 정렬합니다. 

mainAxisAlignment와 마찬가지로 Row, Column Widget 내부에 crossAxisAlignment 속성을 사용해 정의합니다. 

	child: Container(
          ...
          child: Row(
            crossAxisAlignment: CrossAxisAlignment.[속성],
            ...
          ),
        ),

 

crossAxisAlignment 뒤에 들어갈 속성은 다음과 같습니다.

start, end, center는 동일하며, stretch 라는 속성이 추가되었습니다.

crossAxisAlignment: CrossAxisAlignment.start // 위젯을 시작 부분에 배치
crossAxisAlignment: CrossAxisAlignment.end // 위젯을 끝 부분에 배치
crossAxisAlignment: CrossAxisAlignment.center // 위젯을 중간에 배치
crossAxisAlignment: CrossAxisAlignment.stretch // 위젯을 횡축 방향으로 모두 차지하도록 배치

 

	child: Container(
          ...
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.[속성],
            ...
          ),
        ),

---

#2 mainAxisSize

mainAxisSize는 주축의 크기를 설정하는 속성입니다. 

우선 MediaQuery를 사용해 화면 전체에 Container 크기를 차지하도록 했던 코드를 삭제 하도록 하겠습니다. 

Row, Column Widget은 기본 값으로 주축의 크기만큼 화면을 차지하도록 설정 되어 있습니다.

그러나 주축을 요소의 크기 만큼만 차지하도록 설정하고 싶다면 mainAxisSize 속성을 사용하면 됩니다. 

        child: Container(
          color: Colors.black,
          // height : MediaQuery.of(context).size.height,
          // width: MediaQuery.of(context).size.width,
          child: [Column or Row] (
            mainAxisSize: MainAxisSize.[속성],
            children: [
              Container(
                color: Colors.blue,
                width: 50.0,
                height: 50.0,
              ),
              Container(
                color: Colors.blueGrey,
                width: 50.0,
                height: 50.0,
              ),
              Container(
                color: Colors.blueAccent,
                width: 50.0,
                height: 50.0,
              ),
            ],
          ),
        ),

 

MainAxisSize에는 여러가지 속성이 존재하지만, 자주 사용되는 속성은 다음과 같습니다.

mainAxisSize: MainAxisSize.max // 주축의 크기만큼 전부 차지합니다.
mainAxisSize: MainAxisSize.min // 주축의 크기를 요소의 크기에 맞게 차지합니다.

---