여백 스타일 위젯 작성 (Padding, Magin)

1. Padding

Padding : 안쪽 여백 Padding위젯 사용

body: Padding(
  padding: const EdgeInsets.all(10.0),
  child: Container(
    color: Colors.yellow,
  ),
),

2. Container (margin properties)

margin은 Padding처럼 위젯이 없어 Container의 속성값으로 줌

margin : 바깥 여백

body: Container(
  margin: const EdgeInsets.all(100.0),
  color: Colors.green,
),

3. EdgeInsetsGeometry type

Padding, Margin 둘 다 적용됨

// 여백 값을 없애고 싶을 때
margin: EdgeInsets.zero,

// left, top, right, bottom 동일한 여백값을 주고 싶을때
margin: const EdgeInsets.all(40),

// left, top, right, bottom 각기 다른 값을 주고 싶을때
margin: const EdgeInsets.fromLTRB(10, 70, 80, 100),

// left, top, right, bottom 원하는 값만 여백을 주고 싶을때
margin: const EdgeInsets.only(bottom: 100),
margin: const EdgeInsets.only(bottom: 100, top: 20),

// 가로, 세로 별로 여백을 주고 싶을때
margin: const EdgeInsets.symmetric(vertical: 50, horizontal: 100),