[Flutter] Align 위젯

Align 위젯

• 자식 위젯을 특정 위치에 정렬하기 위해 사용하는 위젯
• 특정 위치에 위젯을 배치하기 위한 위젯은 Align과 Positioned가 있지만,
• Positioned는 Stack 안에서만 사용할 수 있고, Align은 독립적으로도 사용 가능함
• Align에서 자식 위젯의 위치는 alignment 속성으로 설정
  • alignment 속성값은 주로 Alignment 클래스 설정값 (예: Alignment.bottomRight, 오른쪽 하단부에 위치)

Alignment 주요 값

• Alignment.topLeft: 위젯을 부모 위젯의 왼쪽 상단 모서리에 맞춤
• Alignment.topCenter: 위젯을 부모 위젯의 상단 중앙에 맞춤
• Alignment.topRight: 위젯을 부모 위젯의 오른쪽 상단 모서리에 맞춤
• Alignment.centerLeft: 위젯을 부모 위젯의 중앙 왼쪽에 맞춤
• Alignment.center: 위젯을 부모 위젯의 중앙에 맞춤
• Alignment.centerRight: 위젯을 부모 위젯의 중앙 오른쪽에 맞춤
• Alignment.bottomLeft: 위젯을 부모 위젯의 왼쪽 하단 모서리에 맞춤
• Alignment.bottomCenter: 위젯을 부모 위젯의 하단 중앙에 맞춤
• Alignment.bottomRight: 위젯을 부모 위젯의 오른쪽 하단 모서리에 맞춤
• Alignment(x, y): 위젯을 (x, y)로 지정된 점에 맞춤. (-1, -1)은 상단 좌측 모서리, (0, 0)은 중앙, (1, 1)은 하단 우측 모서리를 나타냄

 

 

import 'package:flutter/material.dart';

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

class MyApp8 extends StatelessWidget {
  const MyApp8({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text(
            'Align Widget Example',
            style: TextStyle(fontWeight: FontWeight.bold),
          ),
        ),
        body: Center(
          child: Container(
            // color: Colors.blue, 주의!!
            height: 200,
            width: 200,
            decoration: BoxDecoration(
              color: Colors.blue,
              borderRadius: BorderRadius.all(
                Radius.circular(30.0),
              ),
            ),
            child: Align(
              // alignment: Alignment.bottomCenter,
              alignment: Alignment(0.5,0.5),
              child: Text('Hello World'),
            ),
          ),
        ),
      ),
    );
  }
}