Padding class
주어진 패딩으로 자식을 삽입하는 위젯입니다.
자식 요소에 레이아웃 제약 조건을 전달할 때, 패딩은 주어진 패딩만큼 제약 조건을 축소하여 자식 요소의 레이아웃을 더 작은 크기로 조정합니다. 그런 다음 패딩은 자식 요소의 크기에 맞춰 크기를 조정하고, 패딩만큼 확장하여 자식 요소 주변에 빈 공간을 만듭니다.
공식 문서 코드
앱에서 위젯이 많으면 화면이 복잡해지는 경우가 생긴다. 이럴 때 우리는 위젯끼리 공간을 띄워서 사회적 거리 두기를 실천해줘야 한다. 이럴 때 아주 쉽게 사용할 수 있는 위젯이 바로 Padding위젯이다.
이 Padding 위젯은 자식 위젯 주위에 여백(공백 공간)을 추가할 때 사용되는 위젯이다. UI 요소들 사이의 간격을 조절하거나, 특정 위젯이 너무 붙어 있을 때 시각적으로 여유를 주기 위해 사용된다. 바로 알아보자.
하위 속성
| 속성명 | 타입 | 기본값 | 설명 |
| padding | EdgeInsetsGeometry | – | 자식 위젯 주위에 삽입할 여백을 정의하는 값 |
| child | Widget | – | 패딩을 적용할 대상 자식 위젯 |
패딩 위젯의 사용법은 정말 간단하다.
먼저 아래와 같이 일반적인 텍스트를 Padding 으로 감싸야한다.
Padding(
child: Text('Hello World!'),
)
이제 여기에서 padding 파라미터를 사용하여 얼마나 공간을 줄 것인지 정하면 된다.
Padding(
padding: EdgeInsets.all(10),
child: Text('Hello World!'),
)예를 들어 위처럼 EdgeInsets.all로 패딩을 지정 시 하위 위젯의 모든 면에 지정한 값만큼의 공간을 줄 수 있게 된다.
즉, 현재 위의 코드는 아래의 그림과 같다고 보면 된다.
'Hello World'라는 텍스트 상자의 모든 면에서 정확히 10만큼 더 크기가 확장되게 된 것이다. 정말 쉽지 않은가?
여기서 EdgeInsets는 Padding의 적용 공간의 위치와 범위를 파악하는 데 사용하는 EdgeInsetsGeometry 테이프의 위젯이고 렌더 객체로는 RenderPadding을 사용하고 있다.
여기서 하위 위젯에 차지할 수 있는 공간은 할당된 패딩에 따라 제한되게 되고 남은 공간을 비워두게 된다. 쉽게 말해 Padding은 자식 위젯을 감싸고 주변에 빈 공간을 만들어서, 자식이 쓸 수 있는 공간을 줄이고 여백을 확보하는 위젯이란 거다.
이제 실제 사용을 위한 EdgeInsets 생성자를 알아보자. (정말 정말 많이 사용하는 생성자 세 가지만 다루겠다.)
EdgeInsets.all
padding 파라미터를 자동완성 시키면 기본으로 딸려 있는 생성자로, 네 방향(상, 하, 좌, 우)에 같은 크기의 패딩을 줄 수 있다.
padding: EdgeInsets.all(16)이렇게 작성하면 모든 방향에 16픽셀 여백을 줄 수 있게 된다.
EdgeInsets.only
방향을 지정해서 각각 따로따로 여백을 줄 수 있는 생성자로 파라미터로 left, top, right, bottom를 받게 되는데 여기서 자신이 원하는 방향의 파라미터를 뽑아다가 값을 먹여주면 그 방향에만 패딩이 들어가게 된다.
padding: EdgeInsets.only(left: 10, top: 5)보통 한쪽면만 띄어야 할 때 사용된다.
EdgeInsets.symmetric
수평(horizontal)과 수직(vertical) 방향으로 대칭적으로 여백을 줄 때 사용하는 생성자이다.
padding: EdgeInsets.symmetric(horizontal: 12, vertical: 8)이 코드를 그림으로 표현하자면 아래와 같이 표현할 수 있다.
horizontal: 12라는 것은 좌우로 12픽셀을 둘 다 띄우겠다는 의미로 그림에서 보이는 것처럼 양옆으로 12씩 띄우게 된다. 마찬가지로 vertical: 8도 상하로 8픽셀씩 띄우겠다는 의미이다.
이렇게 Padding위젯에 대하여 알아보았다. 솔직히 이 위젯 없으면 진짜 제작 어떻게 하나 싶을 정도로 앱 개발에 막대한 영향을 끼치는 위젯이라고 할 수 있겠다. 나는 보통 반응형으로 위젯을 제작할 때 MediaQuery.sizeOf(context).width 같은 것으로 사이즈를 먹여놓고 Padding의 EdgeInsets.symmetric으로 조절하는 편이다. 암튼 도움이 되었길 바라며 마치겠다.
