Flutter 기초 공부: Rows, Columns, Flutter outline & shorcuts, Expended widget

 

https://www.youtube.com/watch?v=a6oKFvGuTH4&list=PL4cUxeGkcC9jLYyp2Aoh6hcWuxFDX6PBJ&index=11 

 

Row 위젯을 이용해서 한 줄안에 여러 위젯을 추가할 수 있음 이 때 children: <Widget>[ , , ] 형식으로 list 타입으로 작성 (comma separated)

mainAxisAlignment의 프로퍼티로 다양한 형태의 row 구성할 수 있음. 

 

 

같은 방식으로 crossAxisAligntment를 사용하여 세로축의 정렬 설정 가능

 

 

#12 Columns

Row widge t과 같이 mainAxisAlignment의 프로퍼터 이용하기 but Row와 반대축을 가짐. 세로축이 mainAxis  (Row에서는 가로축이 mainAxis)

 

#13. Flutter outline & Shortcuts

꿀팁. Widget에서 전구모양 선택. Add padding 누르면 Padding widget이 추가되고 해당 Container는 Padding의 child가 됨. 

Move widget down으로 해당 위젯의 위치를 변경할 수도 있음

혹은 우측에 보이는 Flutter Outline을 클릭하여 위젯들의 구조를 확인할 수 있으며, 이 곳에서도 상단의 아이콘을 누르거나 오른쪽버튼을 누르면 바로 위에서 할 수 있었던 액션들을 편리하게 이용할 수 있음 

#14. Expanded widgets

Container를 Expanded widget으로 감싸면, 해당 위젯을 이용가능한 space 만큼 늘림. taken up an equal space horizontally 

나머지 컨테이너들도 expanded로 감싸면 동등하게 3등분됨 

너비를 조정하려면 flex property 사용하기: this number reprensets a portion of the width

split up the row into 6 portions of width (=3+2+1), ahd then apply three of those portions of twidth to the first exapanded widget. this gets half bc 3 is a half of the total 
second widget gets a third (-> 1/3) because 2 is a third of 6 

-> fractions of the whold width that they take up

이미지 추가할때 유용. 이 경우 이미지가 너무 커서 다른 위젯들이 밀려난 경우.

이미지를 Expanded widget으로 감싸고 fles property를 추가하여 portiond을 정함으로써 이미지의 크기를 row 내에서 조정할 수 있다. 

#17. List of Data