Flutter에서의 마진, 패딩, 그리고 FractionallySizedBox 사용법

Flutter에서 레이아웃을 디자인하면서 마진, 패딩, 그리고 FractionallySizedBox는 자주 사용되는 중요한 위젯입니다. 이 세 가지 위젯을 어떻게 사용하고, 어떻게 조합할 수 있는지 알아보겠습니다.

 

마진 (Margin)

마진은 위젯 주위의 빈 공간을 생성합니다. Container 위젯의 margin 속성을 사용하여 마진을 적용할 수 있으며, 다양한 방향과 크기로 마진을 설정할 수 있습니다.

• 모든 방향에 동일한 마진 적용:

Container(
  margin: EdgeInsets.all(16.0),
  child: Text('All sides margin'),
)

• 특정 방향에만 마진 적용:

Container(
  margin: EdgeInsets.only(left: 16.0),
  child: Text('Left margin only'),
)

 

패딩 (Padding)

패딩은 위젯 내부의 빈 공간을 생성합니다. Padding 위젯을 사용하거나 Container의 padding 속성을 사용하여 패딩을 적용할 수 있습니다.

• 모든 방향에 동일한 패딩 적용:

Padding(
  padding: EdgeInsets.all(16.0),
  child: Text('All sides padding'),
)

• 수평 및 수직 방향에 동일한 패딩 적용:

Padding(
  padding: EdgeInsets.symmetric(vertical: 8.0, horizontal: 16.0),
  child: Text('Symmetric padding'),
)

 

FractionallySizedBox

FractionallySizedBox는 부모 위젯의 크기에 대한 비율로 자신의 크기를 정의합니다.

• 부모 위젯의 50% 너비와 30% 높이를 가진 자식 위젯 생성:

FractionallySizedBox(
  widthFactor: 0.5,
  heightFactor: 0.3,
  child: Container(color: Colors.blue),
)

 

추천 조합법

1. 마진과 패딩 함께 사용하기:
    마진과 패딩을 함께 사용하면 위젯 주위와 내부의 공간을 세밀하게 조정할 수 있습니다.

Container(
  margin: EdgeInsets.all(16.0),
  padding: EdgeInsets.symmetric(horizontal: 8.0),
  child: Text('Text with margin and padding'),
)

2. FractionallySizedBox와 패딩 함께 사용하기:
    FractionallySizedBox와 패딩을 함께 사용하면 반응형 디자인을 구현하면서도 내부 공간을 적절하게 조절할 수 있습니다.

FractionallySizedBox(
  widthFactor: 0.5,
  child: Padding(
    padding: EdgeInsets.all(8.0),
    child: Container(color: Colors.blue),
  ),
)

결론

마진, 패딩, 그리고 FractionallySizedBox는 Flutter에서 레이아웃을 구성하는 데 필수적인 위젯입니다. 이들을 적절하게 조합하면 다양한 화면 크기와 방향에 대응하는 유연하고 아름다운 디자인을 구현할 수 있습니다.