[Flutter] Container - padding & margin

Container는 Flutter 에서 가장 많이 사용되는 위젯입니다.

 

그 이유를 보면

1) 레이아웃을 위해 꼭 필요한 부분이 padding 과 margin 입니다. 

예를 들어 두개의 Text를 붙여서 쓴다고 하면 Text 자체에는 공백을 주는 속성이 없습니다.

그외 대부분의 Widget은 공백 속성이 없는 경우가 많죠.

그럴경우  위젯을 Container로 감싸고 그 안에 padding과 margin을 주어야 하는 경우가 많습니다.

모든 위젯이 다닥다닥 붙어있으면 당연히 보기 좋지 않겠죠.

2) 위젯의 배경색 또는 둥근모서리 등 위젯의 모양을 다듬기 위해 필요합니다.

decoration 속성을 통해 이런 작업을 많이 하게 되겠죠.

위젯의 모양들이 직사각형으로만 되어 있다면 당연히 내가 생각하는 예쁜 앱이 되지 않을 것입니다.

 

Container의 필수요소인 padding과 margin의 개념은 아래 그림과 같습니다.

 

 

Container 안쪽으로 여유공간을 주고 싶다면 padding을 사용하시면 됩니다.

반대로 Container의 바깥쪽으로 여유공간을 주고 싶다면 margin을 사용하시면 됩니다.

 

padding과 margin을 부여하는 방법은 동일합니다.

 

EdgeInsets.only : left, right, bottom, top 각각 원하는 부분만 원하는 값을 부여할 수 있습니다

EdgeInsets.fromLTRB : left, tom, right, bottm 에 원하는 값을 줄 수 있지만, only와 다른 점은 4가지 값이 모두 들어가야 합니다

EdgeInsets.symmetric : horizontal(가로 값, 즉 left & right), vertical(세로값, 즉 tom & bottm) 에 값을 부여할 수 있습니다

EdgeInsets.all : left, right, bottom, top 4방향으로 모두 동일한 값을 세팅합니다.

 

간단한 예를 들어보겠습니다. 핸드폰의 제조사와 모델명 각각의 값을 가져와 화면에 보여준다고 해보겠습니다.

 

Center(
    child: Row(
      children: [
        Container(
            color: Colors.red,
            child: Text('SAMSUNG', style: TextStyle(fontSize: 20),)),
        Container(
            color: Colors.yellow,
            child: Text('GALAXY S22', style: TextStyle(fontSize: 20),))
      ],
    )
),

 

제조사와 모델명이 바짝 붙여있어 보기가 별로 좋지가 않습니다.

 

이제 두개의 Container를 띄어보겠습니다. 추가로 화면의 제일 왼쪽도 너무 붙어있어 보기가 좋지 않으니 공백을 부여해 보겠습니다.

 

Center(
    child: Row(
      children: [
        Container(
            margin: EdgeInsets.fromLTRB(15, 0, 10, 0), // 왼쪽과 오른쪽 15, 10 margin
            color: Colors.red,
            child: Text('SAMSUNG', style: TextStyle(fontSize: 20),)),
        Container(
            margin: EdgeInsets.only(left: 10), // 왼쪽으로 10 margin
            color: Colors.yellow,
            child: Text('GALAXY S22', style: TextStyle(fontSize: 20),))
      ],
    )
),

 

이제 두개의 Container 가 적당한 거리를 벌리며 떨어졌음을 볼 수 있습니다.

 

다음으로  Container 안쪽으로 여백이 없으니 답답한 느낌이므로, Container 안쪽으로 적당한 여백을 부여하겠습니다.

 

Center(
    child: Row(
      children: [
        Container(
            margin: EdgeInsets.fromLTRB(15, 0, 10, 0), // 왼쪽과 오른쪽 15, 10 margin
            padding: EdgeInsets.all(10), // left, right, top, bottom 10 margin
            color: Colors.red,
            child: Text('SAMSUNG', style: TextStyle(fontSize: 20),)),
        Container(
            margin: EdgeInsets.only(left: 10), // 왼쪽으로 10 margin
            padding: EdgeInsets.symmetric(horizontal: 10, vertical: 10), // 가로 10, 세로 10 margin
            color: Colors.yellow,
            child: Text('GALAXY S22', style: TextStyle(fontSize: 20),))
      ],
    )
),

 

 

이제 Container의 안쪽으로도 적당한 공백이 들어간 것을 볼 수 있습니다.

모두 안쪽으로 left, right, top, bottom 모두 10의 공백이 들어가 있으나, 추가한 방식은 다릅니다.

빨간색 컨테이너는 EdgeInsets.all 을 통해서 10의 공백이 추가되었고, 노란색 컨테이너는 EdgeInsets.symmetric 을 통해 공백이 부여되었습니다.

UI개발을 하다보면 수도 없이 사용하게 될 Container & Edge입니다.