Flutter Widget: Positioned vs Align 비교 분석

Flutter에서 위젯을 정확하게 배치하는 것은 중요한 작업입니다. Positioned와 Align 위젯은 컨테이너 내에서 위젯 위치를 조절하는 데 사용되는 두 가지 주요 위젯입니다. 이 글에서는 두 위젯의 기능과 차이점을 심층적으로 분석하고 실제 코드 예시를 통해 이해를 돕겠습니다.

1. Positioned 위젯

Positioned 위젯은 컨테이너 내에서 위젯을 상대적인 위치에 배치하는 데 사용됩니다. 왼쪽, 오른쪽, 위쪽, 아래쪽 여백을 사용하여 위젯 위치를 조절할 수 있습니다.

 

주요 특징:

• 컨테이너 내 위젯을 상대적인 위치에 배치
• 왼쪽, 오른쪽, 위쪽, 아래쪽 여백 설정 가능
• left, top, right, bottom 속성을 사용하여 위치 조절
• Stack 위젯과 함께 사용하여 위젯 중첩 가능

Stack(
  children: [
    Positioned(
      left: 10,
      top: 10,
      child: Text('This is a positioned text'),
    ),
  ],
)

위 코드는 Stack 위젯 내에서 Positioned 위젯을 사용하여 텍스트 위젯을 컨테이너의 왼쪽 상단에 배치합니다.

2. Align 위젯

Align 위젯은 컨테이너 내에서 위젯을 정렬하는 데 사용됩니다. 위젯을 컨테이너의 중앙, 왼쪽, 오른쪽, 위쪽, 아래쪽 등에 정렬할 수 있습니다.

 

주요 특징:

• 컨테이너 내 위젯을 정렬
• 중앙, 왼쪽, 오른쪽, 위쪽, 아래쪽 정렬 가능
• alignment 속성을 사용하여 정렬 방식 설정
• 다양한 위젯과 함께 사용 가능

Column(
  children: [
    Align(
      alignment: Alignment.center,
      child: Text('This is an aligned text'),
    ),
  ],
)

위 코드는 Column 위젯 내에서 Align 위젯을 사용하여 텍스트 위젯을 컨테이너의 중앙에 정렬합니다.

3. Positioned vs Align 비교

기능	Positioned	Align
기본 동작	상대적인 위치에 배치	정렬
위치 조절	왼쪽, 오른쪽, 위쪽, 아래쪽 여백 설정	중앙, 왼쪽, 오른쪽, 위쪽, 아래쪽 정렬
유연성	높음	낮음
사용 사례	위젯을 정확한 위치에 배치	위젯을 간단하게 정렬

4. 결론:

Positioned와 Align 위젯은 각자의 장단점을 가지고 있습니다. 위젯을 정확한 위치에 배치해야 한다면 Positioned 위젯을 사용하고, 위젯을 간단하게 정렬해야 한다면 Align 위젯을 사용하는 것이 좋습니다.