[Flutter] column 위젯에 padding 적용하기

Flutter에서 Column 위젯을 사용할 때 적절한 padding을 적용하는 방법을 알아봅니다. Column은 여러 개의 자식 위젯을 수직으로 정렬할 때 사용되는 기본적인 Flutter 레이아웃 위젯입니다. 하지만 padding을 적절히 설정하지 않으면 UI가 답답해 보일 수 있습니다. 이 글에서는 다양한 방식으로 Column의 패딩을 조정하는 방법을 설명하겠습니다.

 

 

1. Padding 위젯 사용하기

Flutter에서 가장 간단하게 Column에 패딩을 추가하는 방법은 Padding 위젯을 사용하는 것입니다.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Padding(
          padding: EdgeInsets.all(16.0), // 전체 패딩 적용
          child: Column(
            children: [
              Text('첫 번째 요소'),
              Text('두 번째 요소'),
            ],
          ),
        ),
      ),
    );
  }
}

• Padding 위젯을 Column을 감싸도록 배치합니다.
• EdgeInsets.all(16.0)을 사용하여 모든 방향에 동일한 크기의 패딩을 추가합니다.

 

 

2. Container의 padding 속성 사용하기

Container 위젯은 padding 속성을 직접 제공하므로 이를 활용할 수도 있습니다.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Container(
          padding: EdgeInsets.symmetric(horizontal: 30.0, vertical: 40.0),
          child: Column(children: [Text('첫 번째 요소'), Text('두 번째 요소')]),
        ),
      ),
    );
  }
}

• Container 위젯을 사용하면 padding 속성을 통해 직접 패딩을 설정할 수 있습니다.
• EdgeInsets.symmetric(horizontal: 20.0, vertical: 10.0)을 이용하면 가로와 세로 방향의 패딩을 다르게 설정할 수 있습니다.

 

 

3. SizedBox를 사용하여 간격 조정하기

각 요소 사이의 간격을 조정하고 싶다면 SizedBox 위젯을 사용할 수 있습니다.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Column(
          children: [
            Text('첫 번째 요소'),
            SizedBox(height: 20), // 요소 사이 간격 조정
            Text('두 번째 요소'),
          ],
        ),
      ),
    );
  }
}

• SizedBox(height: 20)을 추가하면 두 요소 사이의 간격이 20픽셀로 설정됩니다.