플러터에서 Positioned 위젯 사용법 및 옵션 완벽 가이드 [with Stack]

 

Flutter에서 UI를 구성할 때, 특정 위치에 위젯을 배치하고 싶다면 Positioned 위젯을 활용할 수 있습니다.

이 포스트에서는 Flutter의 Positioned 위젯이 무엇인지, 어떻게 사용하는지, 그리고 주요 옵션들에 대해 알아보겠습니다.

1. Positioned 위젯이란?

 

Positioned 위젯은 Flutter에서 자식 위젯을 부모 위젯의 특정 위치에 배치할 수 있도록 도와주는 위젯입니다.

이 위젯은 주로 Stack 위젯과 함께 사용되며, top, bottom, left, right 속성을 사용하여 위치를 지정합니다.

Positioned 위젯을 사용하는 이유

• 정밀한 위치 제어: UI 요소를 특정 위치에 배치할 수 있어 레이아웃에 유연성을 제공합니다.
• 다양한 레이아웃 구현: 복잡한 UI를 구성할 때 유용하게 사용할 수 있습니다.
• 애니메이션 지원: 애니메이션과 함께 사용하면 다양한 효과를 쉽게 구현할 수 있습니다.

2. Positioned 위젯 기본 사용법

Positioned 위젯은 반드시 Stack 위젯의 자식으로 사용되어야 합니다.

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('Flutter Positioned 위젯 예제'),
        ),
        body: Stack(
          children: <Widget>[
            Container(
              color: Colors.blue,
              height: 300,
              width: 300,
            ),
            Positioned(
              top: 50,
              left: 50,
              child: Container(
                color: Colors.red,
                height: 100,
                width: 100,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

코드 설명

위 예제에서는 Stack 위젯 안에 두 개의 컨테이너를 배치했습니다. 첫 번째 컨테이너는 배경으로 사용되며, 두 번째 컨테이너는 Positioned 위젯을 사용하여 top: 50, left: 50 위치에 배치됩니다.

3. Positioned 위젯의 주요 옵션

Positioned 위젯은 위치를 조정할 수 있는 여러 옵션들을 제공합니다. 각 옵션을 통해 위젯의 위치를 미세하게 조정할 수 있습니다.

• top: 부모의 위쪽 경계로부터의 거리
• bottom: 부모의 아래쪽 경계로부터의 거리
• left: 부모의 왼쪽 경계로부터의 거리
• right: 부모의 오른쪽 경계로부터의 거리
• width: 자식 위젯의 너비를 지정
• height: 자식 위젯의 높이를 지정

옵션 예시

Positioned(
  top: 20,
  left: 30,
  right: 30,
  bottom: 20,
  child: Container(
    color: Colors.green,
  ),
)

위 코드는 컨테이너가 부모의 모든 경계로부터 일정 거리만큼 떨어지도록 배치합니다.

4. Positioned 위젯 사용 시 주의사항

• Stack 안에서만 사용 가능: Positioned 위젯은 Stack 위젯 내에서만 사용할 수 있습니다. 다른 레이아웃 컨테이너에서는 사용할 수 없습니다.
• 위치 중복: Positioned 위젯의 top, bottom, left, right 속성들을 모두 사용하면, 어느 것이 우선시되는지 혼란스러울 수 있습니다. 따라서, 필요하지 않은 속성은 지정하지 않는 것이 좋습니다.

5. Positioned 위젯과 애니메이션

Positioned 위젯은 애니메이션과 함께 사용할 때 매우 강력합니다. AnimatedPositioned 위젯을 사용하면 위치 변경이 부드럽게 애니메이션으로 나타나도록 할 수 있습니다.

AnimatedPositioned(
  duration: Duration(seconds: 1),
  top: isMoved ? 100 : 200,
  left: isMoved ? 100 : 200,
  child: Container(
    color: Colors.orange,
    height: 100,
    width: 100,
  ),
)

이 예제에서는 isMoved 값에 따라 컨테이너의 위치가 애니메이션 효과와 함께 변경됩니다.

6. 결론

Flutter에서 Positioned 위젯은 특정 위치에 자식 위젯을 배치할 때 매우 유용한 도구입니다.

Stack 위젯과 함께 사용하여 복잡한 UI를 쉽게 구성할 수 있으며, 애니메이션과 결합하면 더욱 매력적인 인터페이스를 구현할 수 있습니다.

Flutter로 멋진 UI를 구현하고 싶다면, Positioned 위젯을 적극 활용해보세요!

 

Starting Google Play App Distribution! "Tester Share" for Recruiting 20 Testers for a Closed Test.

Tester Share [테스터쉐어] - Google Play 앱