<Flutter> Padding과 Margin

Flutter에는 여러 레이아웃 속성이 있습니다.

 

이 포스트에서는 두 가지 핵심 요소인 Padding과 Margin에 집중해보자.

 

Padding과 Margin의 기본 개념

Padding

Padding은 위젯의 경계와 자식 위젯 사이의 공간을 의미합니다.

이 공간은 위젯 내부의 여분 공간을 제공하여 다른 요소와의 간격을 조정하는 데 도움이 됩니다.

Container(
  padding: EdgeInsets.all(16),
  child: Text('Hello, Flutter!'),
)

이 예제에서는 모든 면에 패딩을 적용한 상태로 글자 'Hello, Flutter!'를 표시하는 컨테이너를 만들었습니다.

Margin

Margin은 위젯의 경계와 이웃한 다른 요소 사이의 공간을 의미합니다. 이 공간은 위젯 간의 간격을 만드는 데 사용되어 겹침이나 너무 많은 밀집을 방지합니다.

Container(
  margin: EdgeInsets.all(16),
  child: Text('Hello, Flutter!'),
)

이 예제에서는 컨테이너의 모든 면에 마진을 적용하여 다른 요소와 격리된 상태로 글자 'Hello, Flutter!'를 표시합니다.

 

예제로 이해하는 Padding과 Margin

앞선 예제를 넘어 더 많은 예제를 통해 Padding과 Margin을 구현하는 방법 및 레이아웃에서 이러한 속성을 사용하는 방법에 대해 살펴보겠다.

 

1. EdgeInsets 클래스 사용

Flutter는 EdgeInsets 클래스를 사용하여 위젯의 Padding과 Margin 값을 제어합니다. EdgeInsets 클래스에서 사용할 수 있는 여러 가지 기능을 살펴봅니다.

• EdgeInsets.all(value): 모든 면에 동일한 값을 적용하며 Padding 또는 Margin 값을 설정합니다.
• EdgeInsets.symmetric({horizontal, vertical}): 수평 또는 수직 패딩 또는 마진 값을 설정합니다. 만약 두 값을 모두 설정하면 수평 값은 좌우에 적용되고, 수직 값은 상하에 적용됩니다.
• EdgeInsets.fromLTRB(left, top, right, bottom): 각각의 면에 개별 값을 설정합니다.

예를 들어, EdgeInsets.only 함수를 사용하여 특정 면에만 패딩 또는 마진을 적용하려면 다음과 같이 작성합니다.

Container(
  padding: EdgeInsets.only(left: 8, top: 16),
  child: Text('Flutter Padding Example'),
),

이 예제는 글자에 대해서 왼쪽에 8, 위쪽에 16의 패딩을 적용한 상태입니다.

2. Expanded와 Flexible 위젯

Expanded와 Flexible 위젯은 레이아웃에서 공간을 동적으로 조절하는 데 도움이 됩니다.

Padding과 Margin 속성을 이용해 하위 위젯과의 공간을 구성할 수 있습니다.

Row(
  children: <Widget    Expanded(
      flex: 2,
      child: Container(
        padding: EdgeInsets.all(8),
        margin: EdgeInsets.all(8),
        color: Colors.red,
        child: Text('Widget 1'),
      ),
    ),
    Flexible(
      flex: 1,
      child: Container(
        padding: EdgeInsets.all(16),
        margin: EdgeInsets.all(8),
        color: Colors.blue,
        child: Text('Widget 2'),
      ),
    ),
  ],
)

이 예제에서는 Row 위젯 내에 두 개의 컨테이너를 배치하여

Widget 1은 전체 공간의 2/3 Widget 2는 나머지 1/3의 공간을 차지하며 각각의 마진과 패딩을 적용합니다.

정리

레이아웃을 구축하는 데 있어 Flutter의 Padding과 Margin은 중요한 역할을 합니다.

 

이 블로그 포스트에서는 Padding, Margin의 개념을 간단히 소개하고 예제를 통해 어떻게 구현하는지 알아봤다.

Flutter에서 레이아웃을 구성할 때 Padding과 Margin 속성은 쉽지만 가끔 헷갈리기 때문에 한번 정리해봤다.