[flutter 플러터] Margin Padding 차이 (+EdgeInsets)

화면을 개발할 때 종종 margin 과 padding 이 헷갈릴 때가 있어 그 차이를 정확히 찾아보았다. 

Margin 
: Object(=border)와 화면 사이의 여백 (외부 여백)

Padding
: Object 내부의 여백 

 

아래 사진을 보면 보다 정확하 이해할 수 있다.

 

이미지 출처: https://blog.hubspot.com/website/css-margin-vs-padding

 

---

한편 Margin, Padding 과 함께 특정 위젯의 여백을 두는 도구로서 EdgeInsets 클래스가 자주 쓰인다. 

*공식 문서: https://api.flutter.dev/flutter/painting/EdgeInsets-class.html

 

EdgeInsets는 5개의 constructor 를 가지는데, 종류는 아래와 같다.

 

Constructor	Value	Meaning
EdgeInsets.all	(double value)	상하좌우 모든 측면에 대해 n픽셀만큼의 여백 생성
EdgeInsets.fromLTRB	(double left, double top, double right, double bottom)	상하좌우 모든 측면에 대해 각가 n, n, n, n픽셀만큼의 여백 생성
EdgeInsets.fromWindowPadding	(WindowPadding padding, double devicePixelRatio)	주어진 windowPadding 값만큼의 여백 생성
EdgeInsets.only	({double left = 0.0, double top = 0.0, double right = 0.0, double bottom = 0.0})	상하좌우 중 특정 측면에 대해 n픽셀만큼의 여백 생성
EdgeInsets.symmetric	({double vertical = 0.0, double horizontal = 0.0})	상하(vertical) 와 좌우(horizontal) 중 특정 측면에 대해 n픽셀만큼의 여백 생성

 

아래는 예시코드이다.

 

EdgeInsets.all(10.0)
EdgeInsets.only(left: 10.0)
EdgeInsets.LTRB(25.0, 10.0, 25.0, 10.0) // 아래코드(symmetric)와 동일한 결과값
EdgeInsets.symmetric(vertical: 10.0, horizontal: 25.0) // 위코드(LTRB)와 동일한 결과값