5강 Flutter 박스 디자인 하는 법

맥에서 안드로이드 스튜디오 자동완성 기능 사용하기

설정 => 키보드 => 입력소스 => 입력 메뉴에서 다음 소스 선택 탭을 체크한다.

 

이제 control + space를 누르면 자동완성이 잘 되는 것을 확인 할 수있다.

 

지난 과제 

 

1. appBar 디자인 하는 법 

위에 이미지처럼 appBar안에 텍스트를 적어야한다.

 

그냥 Text('내용') 으로 적으면 오류가 난다.

AppBar()안에 적으려면 title 이라는 친구를 적어야한다.

또한 자동으로 가운데로 배치가 되기 때문에, centerTitle: false로 해주어야한다.

 

 

2. bottomNavigationBar 디자인 

 

구글링 한 결과 이런식으로 코드를 작성하라고 했다.

밑에 자식들을 쓸 경우에는 거의 대부분 [ ] 가 들어가는 느낌이였다.

나 같은 경우 label이 없으면 오류가 났었다. (label 안쓰는 법은 없는지 궁금하다) 

 

 

 

 

쉽게 전체 컨테이너로 감싸는법

Row를 클릭하면 옆에 아이디어 전구가 뜬다.

Wrap with Container를 누르면 전체 컨테이너를 감싼다.

 

 

 

과제 다른 방식 (인강에서 소개한 방식)

SizedBox()가 Container()보다 용량이 조금 더 작다고 한다. 

 

결과물은 위의 이미지와 같다. 

 

 

 

margin 주는 법 

20만큼 margin을 주는 방법이다.

그냥 margin(20)을 주는게 아니라, margin: EdgeInsets.all(숫자) 이런식으로 줘야 적용이된다. 

 

 

padding 주는 법

padding도 똑같이 padding: EdageInsets.all(숫자)로 해주면 된다.

 

10만큼 안쪽으로 여백이 생긴 것을 볼 수있다. 

 

 

개별 수치로 주는 법

.all 대신에 EdgeInsets.fromLTRB(left, top, right, bottom)에 각각 숫자를 넣어주면 된다. 

 

 

테두리 넣는 법

border를 건드려면 decoration에 접근해야한다. 

참고로 decoration에는 border, borderRadius, color, image... 등등이 있으니 잘 살펴보고 쓰자! 

 

 

※주의

참고로 color가 두번 겹치면 에러를 띄어주니 조심하자! color는 한번 만 써주어야 한다. 

 

 

박스 위치 정렬

Align() 안에 alignment: Alignment. ~ 로 정렬하면 된다.

 

여러가지 옵션들이 많으니 참고해서 쓰면 된다. 

 

 

 

width 꽉차게 주는 법

double.infinity를 쓴다. 자신의 부모 영역안에서 최대한 많은 넓이를 가지게 해준다. 

이런식으로 꽉차게 나온는 것을 볼  수 있다.