플러터로 첫 코딩하기! 14 - Column ,Row

목차

- 들어가기 

- 코딩과 개발언어 

- 왜 Flutter를 배워야 할까?

- 용어 정리 1편 (다트.객체지향언어)

- 용어 정리 2편 (변수.자료형)

- 용어 정리 3편 (함수)

- 용어 정리 4편 (조건문)

- 용어 정리 5편 (반복문)

- 용어 정리 6편 (플러터의 위젯)

- 잠시 쉬어가기편 - 플러터는 어떤 IDE가 좋을까? IDE의 미래?

- Flutter가 실행되는 구조 

- Flutter 화면 구성에 대해 

- body : Column ,Row

 

 

 

 사진처럼 검은색 박스 안에 있는 부분이 바로 body 부분입니다. 어플의 주요 화면들이 이 곳에 들어갑니다.  이 화면을 구성을 할 때 

가장 중요한 개념이 바로 Column과 Row 입니다. 

 

Column은 "세로"
Row 는 "가로"  

 

바로 위에 적은 개념이 핵심입니다. 플러터는 위젯으로 화면을 구성한다고 지난시간에 말씀드렸습니다. 그럼 그 위젯들을 화면에 어떻게 배치 할 것인가가 중요합니다. 화면에 GPS처럼 주소를 만들고 그 주소를 직접 입력해서 배치하는 방법도 있습니다만 이 방법은 코드가 복잡해지고 다른 사람이 봤을 때 코드만 봐서는 화면 구조를 이해하기 어렵다는 단점이 있습니다. 

 

결국 코드만 보더라도 해당 위젯이 어느 위치에 있는지 보다 쉽게 파악을 하고자 Column, Row 개념이 나온 것입니다.  

 

부동산 개발에서 가장 중요한 신도시를 구성할 때 도로를 먼저 만듭니다. 그 도로에 위치에 따라 아파트를 넣을지, 교회를 넣을지, 산업단지를 넣을지 중요해집니다. 즉 도로는 신도시를 구성하는 가이드 라인이 되는 것이고 플러터에서 Column과 Row는 위젯을 이용해 화면을 구성 할 때 가이드 라인이 되어줍니다. 

 

Column과 Row는 하위 위젯을 복수로 받아올 수 있습니다. 그 사용법이 

 

 

Column(

children :[

 

]

 

)

 

Row(

childeren :[

 

]

 

)

 

위와 같습니다. 

 

즉 세로, 가로로 복수의 위젯들을 배칠 할 수 있음으로 화면 구성을 보다 쉽게 할 수 있습니다.   위에 사진에 들어간 Column과 Row를 말하자면 전체적인 화면 구성은 세로이기에 Column으로 시작합니다. 그리고  밑에 TextField위젯을 3개와 버튼을 집어넣었습니다.  그 다음 Row로 왼쪽과 오른쪽 각각 Text위젯을 구성했습니다. 

그 밑에 다시 두번 째 Row로 왼쪽과 오른쪽 Text위젯을 구성했습니다. 이하 동일한 작업을 진행했습니다. 

 

쉽게 그림으로 표현하자면 

 

  Column

(처음 만든 Column은 하위 위젯들을 세로로 구성하게 만듬)

TextField

TextField

TextField

button

(여기까지 위젯들이 세로로 구성이 됨)

------------------------

Row 

Text Text

(전체적인 위젯들의 배치 방향은 세로이나 중간에 Row를 사용해서 위젯들을 가로려 여러개 배치 할 수 있게됨)

Row 

Text Text

Row 

Text Text

Row

Text Text

Row

Text Text

-----------------------------------------

 

 

Column과 Row를 이해하면 화면 배치가 정말 쉬워집니다. 

다음 시간에는 Column과 Row를 이용해 더 세부적인 위치를 조정 할 수 있는 기능들을 알아보겠습니다. 

 

 

 

 

 

콩나물 불고기 맛집 :) 

 

찜콩마켙 : 찜콩마켙 (naver.com)

찜콩마켙 : 찜콩마켙