Flutter의 EdgeInsets.symmetric

EdgeInsets.symmetric는 Flutter에서 위젯의 여백이나 패딩을 좌우 또는 상하 대칭으로 설정할 때 사용하는 클래스입니다.

---

기본 구조

EdgeInsets.symmetric은 상하(vertical)와 좌우(horizontal)에 대칭적으로 동일한 간격을 설정합니다.

EdgeInsets.symmetric(
  horizontal: 16.0, // 좌우 간격
  vertical: 8.0,    // 상하 간격
)

이렇게 설정하면 위젯의 상하 간격은 8.0, 좌우 간격은 16.0으로 동일하게 적용됩니다.

---

주요 속성

1. horizontal

   • 왼쪽과 오른쪽 간격을 설정합니다.

2. vertical

   • 위쪽과 아래쪽 간격을 설정합니다.

---

사용 예제

1. Padding 위젯과 함께 사용

Padding(
  padding: EdgeInsets.symmetric(horizontal: 16.0, vertical: 8.0),
  child: Text('안녕하세요!'),
)

• 결과: 텍스트에 상하로 8.0, 좌우로 16.0의 여백이 추가됩니다.

---

2. Container 위젯에서 패딩 설정

Container의 padding 속성으로 위젯 내부 여백을 설정할 수 있습니다.

Container(
  padding: EdgeInsets.symmetric(horizontal: 20.0, vertical: 10.0),
  color: Colors.blue,
  child: Text(
    'Hello, Flutter!',
    style: TextStyle(color: Colors.white),
  ),
)

• 결과: 텍스트와 컨테이너 경계 사이에 상하 10.0, 좌우 20.0의 여백이 생깁니다.

---

3. Button 스타일에서 패딩 설정

TextButton이나 ElevatedButton 스타일에도 적용 가능합니다.

TextButton(
  onPressed: () {},
  style: TextButton.styleFrom(
    padding: EdgeInsets.symmetric(horizontal: 24.0, vertical: 12.0),
  ),
  child: Text('클릭하세요'),
)

• 결과: 버튼 안의 텍스트 주변으로 상하 12.0, 좌우 24.0의 간격이 생깁니다.

---

비교: 다른 EdgeInsets 생성자들

1. EdgeInsets.all(double value)

   • 상하좌우 모든 방향에 동일한 간격을 설정합니다.

   EdgeInsets.all(16.0)

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

   • 특정 방향에만 간격을 설정합니다.

   EdgeInsets.only(left: 10.0, top: 20.0)

3. EdgeInsets.symmetric({horizontal, vertical})

   • 상하, 좌우 대칭적으로 간격을 설정합니다.

   EdgeInsets.symmetric(horizontal: 16.0, vertical: 8.0)

---

언제 사용하나요?

• 좌우 또는 상하 대칭적인 간격을 설정할 때 간결한 코드를 작성하려고 할 때.
• 상하와 좌우 간격의 값이 다를 경우 EdgeInsets.symmetric이 더 직관적입니다.

---