Flutter에서 박스 디자인하는 법 (margin, padding, 정렬)

오늘 새로 배울 내용은 margin, padding, SizedBox()  입니다.

숙제 알아서 잘 해온 분들은 앞에 새로운 내용만 배우고 스킵하면 됩니다.

---

저번시간에 저런 레이아웃 만들어 오라고 했는데

scaffold 써서 만들면 좀 더 쉬울듯. 

(직접 컨테이너로 세 개 배치하는 것 보단)

 

우선 

3개의 파라미터를 집어넣어봄. 

 

appBar

body

bottomNavigationBar

 

이러면 상/중/하 로 나뉘어준다. 

title 을 집어넣었더니 제목이 잘 뜸.

- 구글로 title 찾아봄.

 

body 안에는 아무것도 없어서 대충 텍스트로 채워넣음.

bottom 에는 bottomAppbar 사용. 

이거말고 다른 것도 집어넣을 수 있다. 

bottomAppbar 안에는

자동완성으로 보면 child 라는 것도 집어넣을 수 있다. 

그리고 아이콘을 3개 배치하라고 했으니까

아이콘을 3개 배치해보기.

Row 사용. = 가로로 배치

그리고 안에다가 children 을 써주고,

아이콘 3개를 넣어줌.  

저장하고 테스트 해보기. 

 

왼쪽에 오고 있음

 = 정렬을 하지 않았기 때문이다.

Row 안에서 정렬을 하고 싶으면

저거 사용해야함. 

오른쪽에 뭐 채워야 할 지 까먹음

찾아서 오른쪽을 채워줌.

가운데 배치하기 

. 찍고 자동완성 활용하기 

마음에 드는거 선택해서 사용. 

마지막 바닥 너무 낮은 이유는

패딩, 마진 없어서 그렇다. 

container 박스 안에다가 Row 를 집어넣게 되면

패딩 마진 사용 가능할 지두 

 

Row 를 컨테이너로 감싸주기. 

부모 컨테이너 위젯으로 감싸주자. 

왼쪽에 전구 뜨는 거 확인.

ROW 라는 위젯에다가 마우스 커서 올리고

왼쪽에 전구 버튼 클릭한 다음에

Wrap with Container 선택

그렇게 되면 Container 라는 위젯으로 Row 를 싸매줄 수 있다. 

= height 를 부여하기 위해서

= 안싸매면 줄 방법 없음.

height 부여

쩄든 이런 식으로 숙제하면 될듯하다 

저기에 밑줄 쳐져 있는 이유는 

컨테이너라는 박스를

남용하지 말라는 의미에서

Lint 가 잡아주는 것. 

= 성가셔 보이면 Lint 를 끄면 된다.

 

컨테이너 대신에 대용품이 하나 있음.

SizedBox 라는 위젯 갖다 쓰면

에러가 사라짐. 

 

이유: Container 라는 위젯이 약간 무거움

저건 좀 가벼움. 

 

 

---

 

이건 저번시간 숙제인데

 

따라치면 따라치는 실력이 늘 뿐입니다 

bottomNavigationBar: BottomAppBar(
  child: Container(
    height: 60,
    child: Row(
      mainAxisAlignment: MainAxisAlignment.spaceAround,
      children: [
        Icon(Icons.phone),
        Icon(Icons.message),
        Icon(Icons.contact_page),
      ],
    )
  )
), 

저는 Scaffold() 안에 이렇게 코드를 짰다고 합니다. 끝 

 

참고로 Container()를 썼는데 박스에 넣을게 width, height 밖에 없으면 

SizedBox()를 쓰라고 Lint가 동작할 수 있습니다. 

 

[collapse]

---

Container()인데 사이즈만 필요하면 SizedBox() 쓰셈

박스가 필요한데 저 정도만 필요하면? 

그럼 SizedBox 를 쓰는게 성능상 이점

숙제 내용 지우기 시작하기. 

---

박스를 넣고 싶으면 Container() 쓰라고 했습니다. 

근데 width, height 이런 파라미터만 필요하면 Container() 대신 SizedBox() 쓰면 됩니다.

똑같은 박스 위젯입니다. 하지만 Container() 보다 훨씬 가볍기 때문에 그걸 쓰십시오.

안쓰면 Lint 워닝 뜸 

 

---

Container() 에 여백주는 법

박스 디자인하기

마진 패딩 보더 등등 

저기다가 Container 박스 한 번 만들어보자.

Container 박스 디자인 넣어보기 

박스가 보여야 하니까

width, height 좀 넣기.

마진을 주고 싶은 경우.

= 바깥 여백을 주고 싶은 경우 

margin 이라는 파라미터를 추가할 수 있음. 

저런식으로 하면 좋을 것 같음. 

= 걍 20 부여

근데 저걸 써주고 소괄호 안에다가 마진 양을 넣어줘야 함. 

마진 생긴거 확인 

패딩을 주고 싶은 경우

안쪽 여백을 주는 거므로 

안에다가 글을 쓴다고 했을 때 저렇게 써주면 

안쪽 여백 때문에 밀려난거 확인됨.  

여백이 없을 경우

(패딩제거)

왼쪽 위부터 채우게 된다. 

all 말고 개별 마진을 줄 수 도 있다.

fromLTRB 를 써주면 

각각 좌상우하 로 마진 개별적으로 줄 수 있다. 

위쪽만 주고 싶으면 숫자 부여하고 나머지는 0 으로 기입 

박스에다가 테두리를 주려면

저렇게 border 주고 싶지만 

그럴 수 없음. 

찌끄레기 속성 같은 건 

decoration 여기다가 다 집어넣을 수 있게 돼 있음. 

BoxDecoration 을 써줬을 경우

Box 에 대한 모든 데코레이션 같은 걸 

집어넣을 수 있다.

border도 집어넣을 수 있고

자동완성 되는거 보고 확인할 수 있음. 

Border 는 저런 식으로 부여 가능 

근데 저렇게 보더 넣었더니 에러가 뜸.

= Color 를 2번 정의하고 있어서 그런 것 같음. 

BoxDecoration 을 키면

저 위에다가 Color 같은거 집어넣을 수 없음. 

BoxDecoration 안에다가 집어넣을 수 있다.

에러 안뜨는 거 확인 

 

---

네모네모 박스에 여백을 주고 싶으면

margin: 바깥여백양

padding: 안쪽여백양

이런 파라미터를 쓰면 됩니다. 

여백 수치를 입력할 때 정수를 30 이렇게 입력하면 얼마나 깔끔하고 좋겠습니까

margin: EdgeInsets.all(30), 
padding: EdgeInsets.fromLTRB(10, 20, 30, 40),

하지만 더럽게도 EdgeInsets.all() 안에 수치를 입력하셔야합니다.

EdgeInsets.all(30) 이렇게 하면 상하좌우 여백을 줄 수 있고

EdgeInsets.fromLTRB(10, 20, 30, 40) 이렇게 하면 왼쪽 10, 위 20, 오른쪽 30, 밑 40 만큼 여백을 줄 수 있습니다.

자동완성 되는 걸로 더 실험해보시길 바랍니다.

 

(참고) Row(), Column() 이런덴 안되고 Container() 에만 여백을 줄 수 있습니다. 

Row() 에 여백주고 싶으면 Container() 위젯을 안쪽이나 바깥쪽이나 아무데나 추가하면 됩니다.

(참고) Padding() 위젯도 있습니다. 그냥 padding을 위한 위젯입니다. 

---

Container()에 나머지 찌끄레기 스타일 주는 법

 

별로 안중요한 박스 스타일은

decoration: BoxDecoration() 안에 넣게 되어있습니다. 

Container(
  decoration : BoxDecoration(
    border : Border.all(color : Colors.black)
  )
)

이런 식이고 BoxDecoration() 안에 넣을 수 있는 것들은

color, shape, boxShadow, gradient, image, borderRadius

이런 것들이 있습니다. 사용법은 필요하면 찾아봅시다. 

---

박스 정렬하려면

박스를 정렬하고 싶으면

Center 이런거 쓰면 될 것 같음. 

그렇게 되면 정중앙에 박스를 위치시킬 수 있다.

Center 로 파란박스를 감싸보도록 하기. 

= 전구 활용 

Center 클릭 

감싸진 거 확인할 수 있다. 

가운데 정렬되는 거도 확인 

가운데 정렬 하기 싫고 중앙 왼쪽 정렬 하고 싶은 경우는? 

Center 가 아니라 그 자리에

Algin 위젯 사용해주기 

= 정렬 가능

그리고 alignment 라는 파라미터 사용 

오른쪽에다가 뭘 집어넣어야 할 지 모르겠을 경우

= 구글링

= 왼쪽이랑 유사한 대문자 집어넣기 

.찍고 자동완성 되는 거 보이면

온갖것으로 다 정렬 가능 

---

Center() 안에 자식으로 담으면 중앙정렬이 된다고 했습니다.

그럼 좌상단, 우하단 이런 정렬은 어떻게 하냐고요? 

Align() 안에 담으면 됩니다. 

Align(
  alignment : Alignment.bottomLeft,
  child : Container( width : 50, height : 50, color : Colors.blue )
)

이러면 하단왼쪽 정렬이 가능합니다. 

딱 봐도 bottomLeft라고 써있는거 맘대로 바꾸면 상하좌우정렬 맘대로 할 수 있겠군요 

---

박스 폭을 가로로 꽉차게 주려면

가로로 꽉 차게 하고 싶으면 

width 를 무한히 주세요 라고 하면 됨.

double.infinity = 무한히 

 

부모박스를 넘어가지 않는 선에서

무한히 채워줌

 

* 부모박스 = scaffold 또는 MaterialApp

얘네들의 폭을 넘지 않는 선에서 꽉 채울 것. 

 

---

Container( width : double.infinity, height : 50, color : Colors.blue )

무한히 주라는 뜻인데 이러면 무한히 차지합니다 

근데 그래도 부모 박스의 폭을 넘어가지 않기 때문에 

가로로 꽉찬 박스를 만들 수 있습니다. 

---

실은 자동완성쓰면 레이아웃 수정하기 쉽습니다 

 

Row() 를 대충 썼는데 갑자기 padding, margin을 주고 싶습니까?

그럼 Container() 박스를 겉에 추가를 해야겠군요. 

근데 괄호가 너무 많아 직접 수정하기 싫으면 자동완성을 쓰십시오. 

 

위젯명에 커서 찍으면 왼쪽에 전구가 있을겁니다.

그거 누르면 현재 위젯을 다른 위젯으로 싸맬 수 있습니다.

이제 바보같이 직접 수정하고 그러지 말고 자동완성 쓰셈