Margin, Padding의 개념과 EdgeInsets 클래스

 

 

Margin

margin은 위젯의 경계와 해당 위젯 주위의 다른 요소 사이의 외부 공간을 의미합니다. 

 

즉, margin을 설정하면 위젯 주위의 외부 공간이 생성됩니다.

예를 들어, Container 위젯에 margin을 설정하면 다른 위젯과의 거리(외부 간격)가 늘어납니다.

Container(
  margin: EdgeInsets.all(10), // 위젯 주위에 10의 마진을 설정
  color: Colors.blue,
  child: Text('Hello, margin!'),
)

위 코드에서 EdgeInsets.all(10)은 모든 방향에서 10의 마진을 생성합니다.

 

Padding

padding은 위젯의 경계와 해당 위젯 내부 내용 사이의 내부 공간을 의미합니다. 

 

padding을 설정하면 위젯 내부의 내용과 위젯 경계 사이에 공간이 생성됩니다.

예를 들어, Container 위젯에 padding을 설정하면 위젯 내부의 내용 주위에 내부 간격이 생깁니다.

Container(
  padding: EdgeInsets.all(10), // 위젯 내부에 10의 패딩을 설정
  color: Colors.green,
  child: Text('Hello, padding!'),
)

위 코드에서 EdgeInsets.all(10)은 모든 방향에서 10의 패딩을 생성합니다.

 

요약

Margin: 위젯의 외부 공간으로, 위젯 자체와 주변의 다른 위젯 사이의 거리를 조정합니다.

Padding: 위젯의 내부 공간으로, 위젯 경계와 내부 내용 사이의 거리를 조정합니다.

 

EdgeInsets 

1. EdgeInsets.all(double value)

모든 방향에 동일한 간격을 설정합니다.

EdgeInsets.all(16.0)

이 메서드는 모든 방향으로 16픽셀의 간격을 설정합니다.

2. EdgeInsets.symmetric({double vertical, double horizontal})

수직 및 수평 방향의 간격을 별도로 설정할 수 있습니다.

EdgeInsets.symmetric(vertical: 10.0, horizontal: 20.0)

이 메서드는 수직 방향으로 10픽셀, 수평 방향으로 20픽셀의 간격을 설정합니다.

3. EdgeInsets.only({double left, double top, double right, double bottom})

각 방향별로 간격을 개별적으로 설정합니다.

EdgeInsets.only(left: 10.0, top: 20.0, right: 30.0, bottom: 40.0)

이 메서드는 왼쪽, 위쪽, 오른쪽, 아래쪽에 각각 다르게 간격을 설정합니다.

4. EdgeInsets.fromLTRB(double left, double top, double right, double bottom)

only와 유사하지만 파라미터 순서가 명확하게 LTRB(Left, Top, Right, Bottom)로 설정되어 있습니다.

EdgeInsets.fromLTRB(10.0, 20.0, 30.0, 40.0)

이 메서드도 왼쪽, 위쪽, 오른쪽, 아래쪽에 각각 다르게 간격을 설정합니다.

5. EdgeInsets.zero

간격이 전혀 없는 EdgeInsets를 제공합니다.

EdgeInsets.zero