Flutter 여백을 주는 위젯

Container 위젯

padding 프로퍼티를 사용하면 여백을 줄 수 있다.

Container(
    padding: EdgeInsets.all(10),
)

Padding 위젯

padding 프로퍼티를 사용하면 여백을 줄 수 있다.

Padding (
    padding: EdgeInsets.all(10),
)

EdgeInsets은 뭔가요?

padding, margin과 같이 네 개의 방향(상하좌우)에 여백을 줄 떄 사용하는 클래스입니다.
TextDirection 의 영향을 받지 않습니다

EdgeInsets 인스턴스를 만드는 방법에 대한 몇 가지 예입니다.

//모든 측면(상하좌우)
const EdgeInsets.all(0.0)

//세로(vertical), 가로(horizontal)
const EdgeInsets.symmetric(vertical: 0.0, horizontal: 0.0,)

//지정된 방향
const EdgeInsets.only(left: 0.0, top: 0.0, right: 0.0, bottom: 0.0)

//상하좌우 방향 
const EdgeInsets.fromLTRB(left: 0.0, top: 0.0, right: 0.0, bottom: 0.0)

Container위젯과 Padding의 차이점

Padding 위젯의 경우 프로퍼티로 padding과 child만 가지고 있는 반면
Container의 경우 padding뿐만 아니라 marign, decoration, child 등 다양한 프로퍼티가 존재한다.
그래서 여백 추가, 테두리 추가, 배경색 또는 이미지 변경 등이 가능하다.

flutter layout - container

Container({
    Key? key,
    this.alignment,
    this.padding,
    this.color,
    this.decoration,
    this.foregroundDecoration,
    double? width,
    double? height,
    BoxConstraints? constraints,
    this.margin,
    this.transform,
    this.transformAlignment,
    this.child,
    this.clipBehavior = Clip.none,
}) :

...

Padding({
    Key? key,
    required this.padding,
    Widget? child,
}) :

...

 

 

참고

Container class

Padding class

EdgeInsets class