플러터 (margin, padding) 주기 SizedBox() 위젯

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

 

박스를 넣고 싶으면 Container() 사용

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

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

안쓰면 Lint 워닝 뜸 

 

Container() 에 여백주는 법

 

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

margin: 바깥여백양

padding: 안쪽여백양

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

 

https://makinghome.tistory.com/81

CSS 박스 모델1 | content 콘텐츠 border 보더 padding 패딩 margin 마진

참고 css 개념과 같음

 

 

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

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

 

https://puzzleleaf.tistory.com/215

[Flutter] BoxDecoration으로 심플한 UI 만들기

 

이런 것도 가능 

 

박스 정렬하려면

 

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() 박스를 겉에 추가를 해야겠군요. 

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

 

 

 

 

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

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

 

 

-----------------------------

코딩애플님 플러터 강의를 참고해서 작성한 정리 글입니다. 강추 꼭 들으시길 바랍니다 

https://codingapple.com/