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

Flutter에서 위젯을 수직 중앙에 정렬하는 방법은 다양한 위젯을 사용하여 구현할 수 있습니다. 각 방법은 특정 상황에서 더 적합할 수 있으므로, 아래에서 각각의 방법을 예제와 함께 설명하겠습니다.

1. 주요 방법들

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

2. 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('Vertically Centered Text'),
        ),
      ),
    );
  }
}

3. Align 위젯 사용

Align 위젯은 alignment 속성을 사용하여 자식 위젯을 특정 위치에 배치할 수 있습니다. 수직 중앙 정렬을 위해 Alignment.center 또는 Alignment.centerLeft, Alignment.centerRight를 사용할 수 있습니다.

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('Vertically Centered Text'),
        ),
      ),
    );
  }
}

4. Column 위젯 사용

Column 위젯은 여러 자식 위젯을 수직으로 정렬합니다. 자식들을 수직 중앙에 배치하려면 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('Column Widget Example'),
        ),
        body: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text('Vertically Centered Text in Column'),
          ],
        ),
      ),
    );
  }
}

5. 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('Vertically Centered Text in Container'),
        ),
      ),
    );
  }
}

6. Expanded 위젯 사용

Expanded 위젯을 Column 위젯 내에서 사용하면, 자식 위젯을 남은 공간에서 동일한 비율로 확장하여 중앙에 배치할 수 있습니다.

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: Column(
          children: <Widget>[
            Expanded(child: Container()), // 위쪽의 빈 공간
            Text('Vertically Centered Text with Expanded'),
            Expanded(child: Container()), // 아래쪽의 빈 공간
          ],
        ),
      ),
    );
  }
}

7. 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('Vertically Centered Text in Stack'),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

8. 요약

• Center: 가장 간단하게 수직 중앙 정렬을 구현.
• Align: 특정 위치에 자식 위젯을 배치할 때 사용.
• Column: 여러 자식 위젯을 수직으로 정렬할 때 사용.
• Container: 자식 위젯을 수직 중앙에 정렬할 때 사용.
• Expanded: 남은 공간을 균등하게 확장하여 중앙 정렬.
• Custom Multi-Child Layout: 복잡한 레이아웃 관리.

각 방법을 상황에 맞게 선택하여 사용하면, 원하는 위치에 위젯을 정렬할 수 있습니다.