[Flutter] Flutter Padding class 이해하기

안녕하세요, 성조입니다.

오늘은 Flutter widgets.dart의 Padding Class에 대해 정리하는 시간을 가져보려 해요.

---

Flutter Padding 위젯이란?

플러터 공식 문서를 참조하면  'A widget that insets its child by the given padding.'이란 정의를 얘기한다.

결론부터 말하면 Padding 위젯은, 지정한 padding 값만큼 자식 위젯의 바깥쪽에 여백을 만들어 자식 위젯을 안쪽에 원하는 위치로 밀어 넣는 위젯을 의미한다.

이해를 위해 간략한 이미지를 첨부했다.

Content가 내용 값이며, Content를 원하는 곳으로 노출되도록 위치를 조정해주는 값이 패딩이라 보면 된다.

 

공식 사이트에서 Padding Class를 설명하는 문장을 하나씩 이해하면 다음과 같다.

1) A widget -> 하나의 위젯이다.

2) that inserts its child -> 자신의 자식(child) 위젯을 안쪽으로 밀어 넣는다

3) by the given padding -> 지정된(한) Padding 값만큼

정리하면 자신의 자식 위젯을 안쪽으로 원하는 또는 지정한 만큼 조정 할 수있는 하나의 위젯이라 정의한다.

const Card(
  child: Padding(
    padding: EdgeInsets.all(16.0),
    child: Text('Hello World!'),
  ),
)

공식 문서를 보면 위와 같은 예제를 볼 수 있다.

 

 

 

Padding의 동작 핵심 원리

1. 부모가 자식에게 내려주는 레이아웃 제약(constraints)을 padding만큼 줄인다.

2. 그리고 Padding 자신은 (자식 크기 + padding) 만큼 커진다.

이 동작 핵심 원리를 코드로 설명하면 다음과 같다.

상위 위젯이 자식 위젯에게 Padding을 준 공간 (최대 너비 320)

[상위 위젯]
~~ 값

[하위 위젯]
|[ Padding 박스 전체 영역   ] |
|<--- left padding 20 --->|  (자식이 실제로 쓸 수 있는 공간이 줄어듦 - 자식 위젯 영역이다.)
|   [ Child가 배치되는 영역 ] |
|<--- right padding 20 -->|

피그마 기준 흔히 사용되는 디바이스 크기로 360을 기준으로 패딩 값을 내려준다고 가정하자

부모 위젯은 자식 위젯에게 content 값을 조정할 수 있게 적당한 너비를 제공하여 UI를 그려낸다.

 

최상위 위젯에서 360 값을 부모 위젯이 40을 제외하고 자식 위젯에게 최대 너비 320을 제공 받았다면 Padding에서 320에서 원하는 값만큼 좌,우,상,하를 원하는 값으로 조절할 수 있다 만약 all 옵션을 진행하는 경우 제공 받은 320 픽셀 범위에서 4개 방향으로 20을 뺀 값이 반영되게 된다.

 

내가 예시로 잡은 위 코드를 설명하면 부모 위젯의 좌측에서 20값을 사용했다면 [320 - 20] -> 300 픽셀 자식 위젯에서는 할당 받은 너비 300픽셀 만큼 값을 사용할 수 있게 된다. 우측으로 20픽셀을 준다는 의미는 300 - 20 -> 280으로 280 너비 영역에 자식 위젯의 content가 노출 된다는 의미를 갖는다.

 

 

 

Padding 클래스에는 어떤 값을 사용해야 되는가?

공식 문서를 참조하면 Padding 생성자는 값을 필수로 받으며, 인터페이스인 EdgeInsetsGeometry가 구현체인 EdgeInsets를 받아가게 된다.

 

EdgeInsetsGeometry라는 개념은 해당 위젯에 패딩이 필요하다는 값에 대해 인터페이스 제약을 전달하는 역할이고, 추상 클래스로 속하게 된다. (abstract class) 즉, 서비스에서 패딩을 조절할 때 플러터에서 정의한 이 추상 클래스 EdgeInsetsGeometry에 구현체를 선택하여 사용하며 흔하게 사용되는 EdgeInsets 활용해서 패딩 값 조정이 사용된다 

 

더 깊게 알아보고 싶다면 하단의 참조 주소를 확인하자.

 

Padding 문법

const EdgeInsets.all(20)
const EdgeInsets.symmetric(horizontal: 20, vertical: 12)
const EdgeInsets.only(left: 20, top: 8)
const EdgeInsets.fromLTRB(20, 8, 20, 12)

EdgeInsets.를 접근하면 [all, symmetric, only, fromLTRB] 값들을 통해 원하는 방향으로 값들을 지정해서 사용할 수 있게 된다.

위 예제를 이해하기 위해 개념적으로 정리하면 다음과 같다.

1) EdgeInsets.all(value): 모든 방향(상, 하, 좌, 우)에 동일한 값을 적용한다.

2) EdgeInsets.only({left, top, right, bottom}): 특정 방향에만 여백을 지정한다.

3) EdgeInsets.symmetric({vertical, horizontal}): 수직 또는 수평 방향으로만 여백을 설정한다.

4) EdgeInsets.fromLTRB(left, top, right, bottom): 왼쪽부터 순서대로 패딩 값을 지정한다.

 

 

EdgeInsetsGeometry 한 스푼 더 하기

패딩 여백이 특정 언어 등의 한정이라면 괜찮지만 한국어, 영어를 제외하고 일본어, 태국어, 베트남어, 중국어 등 다양한 길이에 의미가 변화되거나 폰트 위치 배치 등 멀티 언어를 지원하는 경우 방향성(Directional) 여백 등을 위해 해당 추상화 클래스에서 더 다양한 구현체로  EdgeInsetsDirectional를 사용하기도 한다.

EdgeInsetsDirectional의 경우 텍스트 방향(LTR/RTL)에 따라 'start', 'end'가 결정되어 다국어 지원에 유리하게 되는데 시작 방향성에 따라 위치가 다르게 표기되어야 하는 경우 등에서 이런 사항 등이 고려되어 옵셔널하게 구성된다면 더 원하는 디자인과 방향성으로 산출하는데 도움 될 것으로 판단된다.

EdgeInsetsDirectional.start(value) 이런 문법으로 값을 채우면 텍스트 방향의 시작(왼쪽 또는 오른쪽)에서 여백을 주며, EdgeInsetsDirectional.end(value)는 텍스트 방향의 끝에 여백을 준다.

 

사실 다국어가 아니더라도 스타트 지점과 끝 지점에 디테일 UI 포인트를 살리고 싶다면 해당 문법을 사용해서 값을 적용해 주는 것도 매우 도움된다고 본다.

 

 

Padding 개념 정리하기

X 위젯의 주변에 여백이 생기는 것으로 Padding이 마무리되는 것이 아닌 X위젯에 하위 Y위젯으로 값을 전달할 때 X에서 제약된 Padding 값만큼 줄어든 다음 Y에 들어가게 된다고 보면된다.

 

 

---

 

감사합니다.

다음 포스팅에서 뵙겠습니다.

 

- 참조 링크 -

https://api.flutter.dev/flutter/widgets/Padding-class.html?utm_source=chatgpt.com

Padding class - widgets library - Dart API

https://api.flutter.dev/flutter/painting/EdgeInsetsGeometry-class.html?

EdgeInsetsGeometry class - painting library - Dart API