[flutter 플러터] 42강 강의리뷰_Column & Row Widgets for Layout (세로&가로 레이아웃)

이미지, 텍스트 등의 다양한 요소들을 화면에 배치할 때, 우리는 보통 이것들을 일정한 방향(가로 혹은 세로 혹은 대각선?)으로 배치한다. 이때 Column와 Row 위젯은 그 요소들을 배치하는데 사용한다. Column은 세로 방향, Row는 가로 방향으로 배치할 때 사용한다. 다만 Center 위젯처럼 단순히 괄호로 감싸면 되는 것이 아니라, 괄호 안에 children: Widget <>[] 을 먼저 작성한 후 그 대괄호 [] 안에 넣고자 하는 요소들을 작성한다. 아래는 예시 코드이다.

 

Row(
	children: <Widget>[
		Icon(
			Icons.call,
            color: Colors.teal.shade900,),
        SizedBox(
            width: 10.0,
            ),
        Text(
        	'+82 010-0000-0000',
            style: TextStyle(
            	fontSize: 20.0,
                color: Colors.teal[900],
                fontFamily: 'Source Sans Pro'),
        	), //Text
    	], // >Widget>
    ) //Row

 

 

 

 

*Column 공식문서: https://api.flutter.dev/flutter/widgets/Column-class.html

*Row 공식문서: https://api.flutter.dev/flutter/widgets/Row-class.html