(Flutter) margin / padding

margin은 Container 위젯을 기준으로 바깥쪽에 여백을 설정하여 다른 위젯과 간격을 조정할 수 있고, padding은 Container 위젯의 안쪽에 여백을 주어 Container 위젯이 담고 있는 하위 위젯의 간격을 조정한다.

 

 

1) EdgeInsets 클래스

 

margin과 padding의 여백값 설정은 주로 EdgeInsets 클래스를 사용한다. 즉 여백값을 설정하는 클래스이다.

 

• EdgeInsets.all() : 상,하,좌,우에 동일한 여백값을 설정한다.
• EdgeInsets.only() : left, top, right, bottom으로 방향을 지정한다.
• EdgeInsets.fromLTRB() : 좌, 상, 우, 하 순서로 여백값을 지정한다.

 

body: Container(
  margin: EdgeInsets.all(50),
  color: Colors.yellow,
),

 

 

 

body: Container(
  margin: EdgeInsets.only(top: 100),
  color: Colors.yellow,
),

 

 

 

 

body: Container(
  margin: EdgeInsets.fromLTRB(30, 80, 20, 200),
  color: Colors.yellow,
),

 

 

 

 

 

body: Container(
  color: Colors.yellow,
  margin: EdgeInsets.all(50),
  padding: EdgeInsets.all(30),
  child: Container(
    color: Colors.orange,
  ),
),