[Flutter] Container, Column, Row 위젯

 

플러터에서는 기본으로 제공되는 다양한 위젯을 조합하여 다양한 화면을 그릴 수 있다.

특히 children 프로퍼티를 사용하여 또 다른 위젯을 자식으로 가질 수 있는데, 다음과 같이 사용할 수 있다.

 

 

예)

Column(
	children: <Widget>[
    	[위젯],
        [위젯],
        [위젯],
    ],
),

 

 

---

 

Container

 

Container은 아무것도 없는 위젯으로, 다양한 프로퍼티를 가지고 있기 때문에 사용하기에 따라서 다양한 응용이 가능하다.

가로와 세로의 길이, 색, 안쪽 여백(padding), 바깥쪽 여백(margin) 등을 설정할 수 있다.

 

Container(
    color: Colors.red,
    width: 100,
    height: 100,
    padding: const EdgeInsets.all(8.0),
    margin: const EdgeInsets.all(8.0),
),

 

 

[실행 결과]

 

 

 

---

 

Column

 

Column은 위젯들을 수직 방향으로 배치하는 위젯이다.

아래는 children 프로퍼티를 사용하여 차례대로 빨강, 초록, 파랑 container을 나열한 예제이다.

 

Column(
    children: <Widget>[
      Container(
        color: Colors.red,
        width: 100,
        height: 100,
        padding: const EdgeInsets.all(8.0),
        margin: const EdgeInsets.all(8.0),
      ),
      Container(
        color: Colors.green,
        width: 100,
        height: 100,
        padding: const EdgeInsets.all(8.0),
        margin: const EdgeInsets.all(8.0),
      ),
      Container(
         color: Colors.blue,
        width: 100,
        height: 100,
        padding: const EdgeInsets.all(8.0),
        margin: const EdgeInsets.all(8.0),
      )
    ]
)

 

 

[실행 결과]

 

 

 

---

 

Row

 

Row은 Column과 달리 위젯들을 수평 방향으로 배치하는 위젯이다.

아래는 위에서 수직으로 정렬했던 빨강, 초록, 파랑 container을 수평으로 나열한 예제이다.

 

Row(
    children: <Widget>[
      Container(
        color: Colors.red,
        width: 100,
        height: 100,
        padding: const EdgeInsets.all(8.0),
        margin: const EdgeInsets.all(8.0),
      ),
      Container(
        color: Colors.green,
        width: 100,
        height: 100,
        padding: const EdgeInsets.all(8.0),
        margin: const EdgeInsets.all(8.0),
      ),
      Container(
         color: Colors.blue,
        width: 100,
        height: 100,
        padding: const EdgeInsets.all(8.0),
        margin: const EdgeInsets.all(8.0),
      )
    ]
)

 

 

[실행 결과]

 

 

 

 

---

 

추가적으로, Row, Column과 같이 방향성이 있는 위젯은 mainAxis와 crossAxis에 관한 프로퍼티를 세팅할 수 있다.

 

https://while1.tistory.com/111

[Flutter] MainAxis와 CrossAxis