[ Flutter ] Layout에서 수평 중앙 정렬 하기

Flutter에서 수평 중앙 정렬을 구현하는 방법은 여러 가지가 있습니다. 각 상황에 따라 적절한 방법을 선택할 수 있습니다. 아래에서 다양한 방법을 예제와 함께 설명하겠습니다.

주요 방법들

1. Center 위젯 사용
2. Align 위젯 사용
3. Row 위젯 사용
4. Container 위젯의 alignment 속성 사용
5. Expanded 위젯 사용
6. Custom Multi-Child Layout (Wrap, Stack 등) 사용

1. Center 위젯 사용

Center 위젯은 자식 위젯을 수평과 수직으로 중앙에 배치합니다.

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('Center Widget Example'),
        ),
        body: Center(
          child: Text('Centered Text'),
        ),
      ),
    );
  }
}

2. Align 위젯 사용

Align 위젯은 자식 위젯을 특정 위치에 배치할 수 있도록 합니다. 중앙 정렬을 위해 alignment 속성에 Alignment.center를 사용합니다.

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('Align Widget Example'),
        ),
        body: Align(
          alignment: Alignment.center,
          child: Text('Centered Text'),
        ),
      ),
    );
  }
}

3. Row 위젯 사용

Row 위젯은 여러 자식 위젯을 수평으로 정렬합니다. 자식들을 중앙에 배치하려면 mainAxisAlignment 속성에 MainAxisAlignment.center를 설정합니다.

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('Row Widget Example'),
        ),
        body: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text('Centered Text in Row'),
          ],
        ),
      ),
    );
  }
}

4. Container 위젯의 alignment 속성 사용

Container 위젯은 자식 위젯을 배치할 때 alignment 속성을 사용할 수 있습니다. 중앙 정렬을 위해 Alignment.center를 사용합니다.

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('Container Alignment Example'),
        ),
        body: Container(
          alignment: Alignment.center,
          child: Text('Centered Text in Container'),
        ),
      ),
    );
  }
}

5. Expanded 위젯 사용

Expanded 위젯을 Row 위젯 내에서 사용하면, 자식 위젯을 남은 공간에서 동일한 비율로 확장합니다. 이를 사용하여 중앙 정렬을 구현할 수 있습니다.

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('Expanded Widget Example'),
        ),
        body: Row(
          children: <Widget>[
            Expanded(child: Container()), // 왼쪽의 빈 공간
            Text('Centered Text with Expanded'),
            Expanded(child: Container()), // 오른쪽의 빈 공간
          ],
        ),
      ),
    );
  }
}

6. Custom Multi-Child Layout 사용 (Wrap, Stack 등)

복잡한 레이아웃을 다룰 때 Wrap 또는 Stack 위젯을 사용하여 중앙 정렬을 구현할 수 있습니다.

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('Stack Alignment Example'),
        ),
        body: Stack(
          children: <Widget>[
            Positioned.fill(
              child: Align(
                alignment: Alignment.center,
                child: Text('Centered Text in Stack'),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

요약

• Center: 간단한 중앙 정렬.
• Align: 특정 위치에 자식 위젯을 배치할 때 사용.
• Row: 수평 정렬 시 자식들을 중앙에 배치.
• Container: 자식 위젯을 중앙에 정렬.
• Expanded: Row나 Column 안에서 공간을 균등하게 확장하여 중앙 정렬.
• Custom Multi-Child Layout: 복잡한 레이아웃 관리.

각 방법을 이해하고, 필요에 따라 적합한 방법을 선택하여 수평 중앙 정렬을 구현할 수 있습니다.