[ Flutter ] Margin 사용하기

Flutter에서 margin을 사용하여 위젯 주위에 여백을 설정하는 방법은 주로 Container 위젯의 margin 속성을 통해 이루어집니다. EdgeInsets 클래스를 사용하여 다양한 방식으로 여백을 설정할 수 있습니다. 여백을 설정하는 방법에는 다음과 같은 주요 옵션들이 있습니다:

1. 주요 Margin 설정 방법

1. 모든 방향에 동일한 여백 설정 (all)
2. 각 방향에 다른 여백 설정 (only)
3. 대칭적으로 여백 설정 (symmetric)
4. 위젯 외부에 여백 추가하기

2. Margin 설정 예제

각 방법을 예제와 함께 살펴보겠습니다.

1. 모든 방향에 동일한 여백 설정 (EdgeInsets.all)

EdgeInsets.all을 사용하면 모든 방향(위, 아래, 왼쪽, 오른쪽)에 동일한 여백을 설정할 수 있습니다.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('EdgeInsets.all Example'),
        ),
        body: Container(
          margin: EdgeInsets.all(20.0),
          color: Colors.blue,
          child: Text('Margin on all sides'),
        ),
      ),
    );
  }
}

2. 각 방향에 다른 여백 설정 (EdgeInsets.only)

EdgeInsets.only를 사용하면 각 방향에 서로 다른 여백을 설정할 수 있습니다. 예를 들어, 위, 아래, 왼쪽, 오른쪽에 각각 다른 여백을 줄 수 있습니다.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('EdgeInsets.only Example'),
        ),
        body: Container(
          margin: EdgeInsets.only(left: 30.0, top: 10.0, right: 50.0, bottom: 20.0),
          color: Colors.red,
          child: Text('Different margin on each side'),
        ),
      ),
    );
  }
}

3. 대칭적으로 여백 설정 (EdgeInsets.symmetric)

EdgeInsets.symmetric을 사용하면 수평 및 수직 방향으로 대칭적인 여백을 설정할 수 있습니다.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('EdgeInsets.symmetric Example'),
        ),
        body: Container(
          margin: EdgeInsets.symmetric(horizontal: 30.0, vertical: 10.0),
          color: Colors.green,
          child: Text('Symmetric margin'),
        ),
      ),
    );
  }
}

4. 위젯 외부에 여백 추가하기

margin을 사용하여 다른 위젯 사이에 여백을 추가할 수 있습니다. 예를 들어, 여러 개의 Container를 나란히 배치할 때 각 Container 사이에 여백을 추가할 수 있습니다.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Multiple Containers with Margin'),
        ),
        body: Column(
          children: <Widget>[
            Container(
              margin: EdgeInsets.all(10.0),
              color: Colors.blue,
              height: 50,
              child: Center(child: Text('Container 1')),
            ),
            Container(
              margin: EdgeInsets.all(20.0),
              color: Colors.red,
              height: 50,
              child: Center(child: Text('Container 2')),
            ),
            Container(
              margin: EdgeInsets.all(30.0),
              color: Colors.green,
              height: 50,
              child: Center(child: Text('Container 3')),
            ),
          ],
        ),
      ),
    );
  }
}

3. 요약

• EdgeInsets.all: 모든 방향에 동일한 여백 설정.
• EdgeInsets.only: 각 방향에 서로 다른 여백 설정.
• EdgeInsets.symmetric: 수평 및 수직 방향으로 대칭적인 여백 설정.
• Container 위젯의 margin 속성: 위젯 사이에 여백을 추가하여 레이아웃을 조정.

각 방법을 사용하여 Flutter의 레이아웃을 조정할 수 있으며, 상황에 맞는 적절한 여백 설정 방법을 선택할 수 있습니다.