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

0:00 저번시간 숙제는

4:27 박스 마진, 패딩

6:54 테두리 등 기타 디자인은

8:32 정렬은

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

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

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

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

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

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

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

안쓰면 Lint 워닝 뜸 

Container() 에 여백주는 법

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

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() 안에 자식으로 담으면 중앙정렬이 된다고 했습니다.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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