flutter Align 위젯 알아보기

Align 위젯은 Flutter에서 자식 위젯을 정렬할 때 사용하는 위젯입니다. 부모 위젯 내에서 자식 위젯의 위치를 정밀하게 제어할 수 있도록 합니다.

 

주요 속성

 

1. alignment: 자식 위젯을 정렬할 위치를 지정합니다.

2. widthFactor: 자식 위젯의 너비에 곱할 배수입니다.

3. heightFactor: 자식 위젯의 높이에 곱할 배수입니다.

 

alignment

 

alignment 속성은 Alignment 클래스의 인스턴스를 사용하여 자식 위젯의 정렬 위치를 지정합니다. Alignment 클래스에는 여러 가지 미리 정의된 상수가 있습니다.

 

• Alignment.topLeft: 왼쪽 위 정렬

• Alignment.topCenter: 중앙 위 정렬

• Alignment.topRight: 오른쪽 위 정렬

• Alignment.centerLeft: 왼쪽 중앙 정렬

• Alignment.center: 중앙 정렬

• Alignment.centerRight: 오른쪽 중앙 정렬

• Alignment.bottomLeft: 왼쪽 아래 정렬

• Alignment.bottomCenter: 중앙 아래 정렬

• Alignment.bottomRight: 오른쪽 아래 정렬

 

 

다양한 정렬 위치 사용

body: Stack(
          children: <Widget>[
            Align(
              alignment: Alignment.topLeft,
              child: Container(
                width: 50,
                height: 50,
                color: Colors.red,
              ),
            ),
            Align(
              alignment: Alignment.topRight,
              child: Container(
                width: 50,
                height: 50,
                color: Colors.green,
              ),
            ),
            Align(
              alignment: Alignment.bottomLeft,
              child: Container(
                width: 50,
                height: 50,
                color: Colors.blue,
              ),
            ),
            Align(
              alignment: Alignment.bottomRight,
              child: Container(
                width: 50,
                height: 50,
                color: Colors.yellow,
              ),
            ),
          ],
        ),

widthFactor 및 heightFactor 사용

 

widthFactor와 heightFactor는 자식 위젯의 크기에 영향을 줍니다. 이 속성들을 사용하여 자식 위젯의 크기를 부모 위젯의 크기에 상대적으로 설정할 수 있습니다.

 

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 with widthFactor & heightFactor'),
        ),
        body: Center(
          child: Align(
            alignment: Alignment.center,
            widthFactor: 2.0,
            heightFactor: 2.0,
            child: Container(
              width: 100,
              height: 100,
              color: Colors.purple,
              child: Center(child: Text('Align')),
            ),
          ),
        ),
      ),
    );
  }
}

 

주요 포인트

 

• Align 위젯은 부모 위젯 내에서 자식 위젯을 정렬하는 데 사용됩니다.

• alignment 속성을 사용하여 자식 위젯의 정렬 위치를 지정할 수 있습니다.

• widthFactor와 heightFactor 속성을 사용하여 자식 위젯의 크기를 상대적으로 설정할 수 있습니다.

 

Align 위젯 문서

 

• Align 클래스 문서: Align 클래스 문서

• Alignment 클래스 문서: Alignment 클래스 문서