Flutter Padding, 위젯 사이 띄우기

안녕하세요 독학코딩입니다. 오늘은 Flutter의 padding에 대해서 배워보겠습니다. 사람에 따라서 Padding()을 많이 쓰기도 하고 Padding() 대신에 Container.padding 을 쓰시는 분들도 있는데 오늘은 둘 모두에 대해서 배워보고 차이도 설명해드리겠습니다. 

 

Flutter Padding

List.generate(40, (index) {
  return Padding(
    padding: EdgeInsets.all(2),
    child: Card(
      color: Colors.blue
    ),
  );
}

Padding()을 사용하는 방법은 간단합니다. padding을 줄 위젯 (여디서는 Card입니다.)을 Padding() 위젯 안에 넣어주고 

padding: EdgeInsets.all(2),

위 처럼 원하시는 만큼 padding을 설정해주시면 됩니다. padding에 설정할 수 있는 값은 아래와 같습니다.

  padding: EdgeInsets.all(10),
  padding: EdgeInsets.only(top: 10),
  padding: EdgeInsets.only(left: 10),
  padding: EdgeInsets.only(bottom: 10),
  padding: EdgeInsets.only(right: 10),
  padding: EdgeInsets.symmetric(horizontal: 10),
  padding: EdgeInsets.symmetric(vertical: 10),  
  // 아래는 TextDirection에 영향 받음
  padding: EdgeInsetsDirectional.all(10),
  padding: EdgeInsetsDirectional.only(top: 10),
  padding: EdgeInsetsDirectional.only(start: 10),
  padding: EdgeInsetsDirectional.only(bottom: 10),
  padding: EdgeInsetsDirectional.only(end: 10),

실제로는 더 많습니다만 이정도만 알고 계셔도 불편한 없이 사용하실 수 있으실겁니다. TextDirection에 영향을 받는 다는 의미는 Padding()의 child로 Text의 종류가 오는데 TextDirection을 수정한 경우 EdgeInsertsDirectional이 다른것과는 다르게 적용된다는 의미입니다. Dynamic하게 TextDirection을 바꾸는 경우라면 유용합니다.​

 

Flutter Container.padding

Container(
  padding: EdgeInsets.all(2),
  child: Card(
    color: Colors.blue
  ),
)

Container에서 padding을 사용할 땐 위와 같이 합니다. Padding() 대신에 Container() 위젯에 Card를 넣고 padding을 설정해주시면 됩니다. 사용방법이 완전히 똑같죠? 그렇다면 Padding() 위젯 자체와 Container 위젯에서 padding 속성을 사용하는 건 무엇이 다를까요?

 

Flutter docs를 읽어보면 이 둘 사이에는 사실 아무런 차이가 없다고 합니다. Container.padding 속성을 사용하는 경우 Container가 Padding을 상속받아 사용하는 것이 아니라 Padding 위젯을 child 처럼 구축한다고 합니다. 즉, 편한걸로 선택해서 사용하면 된다고 합니다.