[Flutter] Row, Column 알아보기

Compose의 Row와 같이 플러터의 Row도 위젯들을 가로로 배치하는 역할을 하는 위젯이다. Column은 세로로 배치한다.

Container와 같이 기본 위젯에 속하는 위젯으로 여러 자식들을 받기 위해 child 프로퍼티가 아닌 children 프로퍼티를 필수 구현하고, 그 값으로 위젯들의 배열을 넘겨야 한다.

아래는 Row의 공식문서다.

 

https://api.flutter.dev/flutter/widgets/Row-class.html

Row class - widgets library - Dart API

자식들을(children) 가로 배열로 표시하는 위젯이다. 자식이 확장되어 사용 가능한 가로 공간을 채우게 하려면 Expanded 위젯으로 자식을 감싸라. Row 위젯은 스크롤되지 않는다. 위젯을 한 줄로 나열하고 공간이 부족할 때 스크롤 가능하게 하려면 리스트뷰를 쓰는 게 좋다. 세로 변형은 Column을 참고하라
자식이 하나만 있다면 Align 또는 Center를 써서 배치하는 게 좋다...(중략)

 

다음은 Column의 공식문서다.

 

https://api.flutter.dev/flutter/widgets/Column-class.html

Column class - widgets library - Dart API

자식들을(children) 세로 배열로 표시하는 위젯이다. 자식이 확장되어 사용 가능한 세로 공간을 채우게 하려면 Expanded 위젯으로 자식을 감싸라. Column 위젯은 스크롤되지 않는다...(중략)...가로 변형은 Row를 참고하라. 자식이 하나만 있다면 Align 또는 Center를 써서 배치하는 게 좋다

 

사실 가로, 세로 방향만 다르고 나머지 설명들은 모두 일치한다.

배경색이 다른 Row 3개를 Column 안에 배열하려면 아래와 같이 할 수 있다.

 

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      body: SafeArea(
        child: Column(
          children: [
            Expanded(
              child: Row(
                children: [
                  Expanded(
                    child: Container(
                      color: Colors.red,
                      alignment: Alignment.center,
                      child: Text(
                          style: TextStyle(
                            fontSize: 20.0,
                            color: Colors.black,
                          ),
                          "1번"),
                    ),
                  ),
                  Expanded(
                    child: Container(
                      color: Colors.yellow,
                      alignment: Alignment.center,
                      child: Text(
                          style: TextStyle(
                            fontSize: 20.0,
                            color: Colors.black,
                          ),
                          "2번"),
                    ),
                  ),
                  Expanded(
                    child: Container(
                      color: Colors.blue,
                      alignment: Alignment.center,
                      child: Text(
                          style: TextStyle(
                            fontSize: 20.0,
                            color: Colors.black,
                          ),
                          "3번"),
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    ),
  ));
}