[Flutter] Padding 위젯

 

padding 

 

padding 위젯은 안쪽 여백을 표현할 때 사용하는 위젯이며, 아래와 같이 생성한다.

 

Padding(
	padding: const EdgeInsets.all(10.0),	// 이 부분에서 padding 값 지정
		
        child:Container(
        	//child 코드 생략
        )
)

 

 

 

 

여백은 EdgeInsets 클래스를 사용하여 값을 지정할 수 있으며, 이 클래스에는 여러가지 함수가 제공된다.

 

 

EdgeInsets

 

함수	설명
all	네 방향 모두 같은 값 지정
only	상하좌우 중 원하는 방향에만 값 지정 (지정하지 않은 방향에는 기본값 0.0)
fromLTRB	네 방향의 값을 각각 지정
symmetric	상하(vertical)와 좌우(horizontal) 값 지정

 

 

• all

all은 네 방향에 모두 값은 값을 지정하여 한번에 여백을 줄 수 있다.

Padding(
  padding: EdgeInsets.all(40),
child:Container(
  color: Colors.red,
)
)

 

 

 

• only

only는 상하좌우 중 여백을 주고 싶은 곳만 지정해서 줄 수 있다.

여백을 주고 싶은 곳에 직접 값을 입력하면 되고, 값을 주는 순서는 중요하지 않다. 값을 지정하지 않으면 기본값 0.0이 지정된다.

Padding(
  padding: EdgeInsets.only(bottom: 100, left: 50, top: 10, right: 5 ),
child:Container(
  color: Colors.red,
)
)

 

 

Padding(
  padding: EdgeInsets.only(bottom: 100, left: 50 ),	//하단과 왼쪽만 여백 지정
child:Container(
  color: Colors.red,
)
)

 

 

 

 

• fromLTRB

fromLTRB는 네 방향의 값을 모두 지정하되, 값을 각각 지정할 수 있는 함수이다.

이름에 나와 있는 것처럼 순서대로 왼쪽(Left), 위(Top), 오른쪽(Right), 아래(Bottom) 순으로 지정하면 된다.

only와는 달리 하나라도 값을 지정하지 않으면 오류가 나기 때문에 주의가 필요하다.

Padding(
  padding: EdgeInsets.fromLTRB(0, 20, 40, 80),	//왼쪽, 위, 오른쪽, 아래 순
child:Container(
  color: Colors.red,
)
)

 

 

 

 

• symmetric

symmetric은 상하(vertical)와 좌우(horizontal) 값을 지정한다.

only처럼 직접 값을 입력하고자하는 부분을 지정하여 값을 입력할 수 있고, 역시 둘 중 하나만 입력하는 것도 가능하다.

값을 지정하지 않은 부분은 기본값 0.0이 설정된다.

Padding(
  padding: EdgeInsets.symmetric(vertical: 100, horizontal: 50),
child:Container(
  color: Colors.red,
)
)

 

Padding(
  padding: EdgeInsets.symmetric(vertical: 100),	//상하 값만 지정
child:Container(
  color: Colors.red,
)
)

 

 

 

---

 

 

추가적으로 EdgeInsets 앞에 const를 붙이면, 컴파일 타임에 상수로 정의되기 때문에 다시 사용되는 부분이 있을 경우 메모리에 있는 값을 재사용하게 된다는 이점이 있다. 상황에 따라서는 메모리를 많이 잡아먹을 수도 있기 때문에 해당 값이 자주 사용되는 경우에 선택하여 const를 붙이면 된다.

Padding(
  padding: const EdgeInsets.all(50),
child:Container(
  color: Colors.red,
)
)