4강 기본 앱 레이아웃 만드는 법

 

※주의

항상 child를 모든 위젯이랑 쓸 수 있는 건 아니다. 

맞는 위젯이 있으니 확인해가면서 익힐 것.

 

이번에는 Material App() 에 대해서 살펴볼 것이다. 

이 친구도 결국엔 위젯이다. 여기엔 디자인 및 기본 세팅 값이 들어있기에 커스터마이징 하더라도 써야한다.

없으면 코드가 늘어나버린다.

 

 

 

상중하로 나눠주는 Scaffold 위젯

상단은 appBar

중간에 들어갈 내용은 body

bottomNavigationBar 로 하단을 만들어준다.

 

 

 

 

여러 위젯 가로로 배치하는 법 - Row(children: [ ])위젯 사용

 

[ ] array 자료 형태로 써주면 된다.

 

가로 배치가 잘 되는 것을 확인할 수 있다 :) 

 

 

 

※여기서 잠깐!

eslint 때문에 밑줄이 그어지는 것을 볼 수있다. 

이는 analysis_options.yaml에서 rules에 prefer_const_constructirs_in_immutables: false를 해주면 해결 된다!

 

 

 

여러 위젯 세로로 배치하는 법 - Column(children: [ ])위젯 사용

 

 

 

Row, Column 요소들 정렬 

display:flex랑 유사하다고 보면 된다.

 

자동완성이 되니까 여러개 살펴보고 사용하면된다.

crossAxisAlignment 같은 경우 높이가 지정이 되어야하기에 Container()로 한번더 감싸주자.

 

 

 

Tip ) 우측 파라미터에 뭐가 들어갈지 모를땐?

1. 파라미터에 대문자로 써보기

2. 커서 올리고 Type 뜨는거 보기

3. 검색 ㄱㄱ

 

 

 

 

과제

만들어오기!!