플러터는 구글에서 개발한 크로스 플랫폼 앱 개발 프레임워크로, 아름답고 반응형 UI를 만들기 위해 다양한 위젯을 제공합니다.

이번 글에서는 플러터에서 Stack 위젯과 다른 레이아웃 위젯을 함께 사용하여 애니메이션 효과를 추가하는 방법에 대해 알아보겠습니다.

Stack 위젯 소개

Stack 위젯은 다른 위젯들을 겹쳐서 배치할 수 있는 위젯입니다. 즉, 각각의 위젯을 겹쳐서 화면에 표시할 수 있습니다. 이러한 Stack 위젯의 특징을 이용하여 동적으로 위젯을 추가 또는 제거하거나 애니메이션 효과를 추가할 수 있습니다.

애니메이션 효과 추가 방법

1. Stack 위젯을 생성하고, 자식 위젯을 추가합니다.

   Stack(
     children: [
    // 애니메이션 효과를 추가할 자식 위젯들
     ],
   ),
   

2. AnimatedPositioned 위젯을 활용하여 자식 위젯의 위치를 애니메이션화 할 수 있습니다.

   AnimatedPositioned(
     duration: Duration(milliseconds: 500),  // 애니메이션 시간 설정
     left: _isAnimated ? 100 : 0,  // 위치가 변경되는 애니메이션 설정
     top: _isAnimated ? 100 : 0,  // 위치가 변경되는 애니메이션 설정
     child: Container(
    width: 100,
    height: 100,
    color: Colors.blue,
     ),
   ),
   

3. 애니메이션 효과를 추가하고 싶은 자식 위젯을 AnimatedPositioned로 감싸서 위치 애니메이션을 설정할 수 있습니다.

4. 애니메이션을 제어하기 위해 상태 변수를 추가하고, 원하는 이벤트에 따라 상태를 변경시켜 애니메이션 효과를 발생시킬 수 있습니다. ```dart bool _isAnimated = false;

void _toggleAnimation() { setState(() { _isAnimated = !_isAnimated; }); }

5. 원하는 애니메이션 트리거(버튼 클릭 등)에 애니메이션을 제어하는 함수를 연결해 줍니다.
```dart
FloatingActionButton(
  onPressed: () {
    _toggleAnimation();
  },
  child: Icon(Icons.play_arrow),
),

참고 자료

• Flutter Documentation
• AnimatedPositioned Class

위에서는 플러터에서 Stack 위젯과 다른 레이아웃 위젯의 애니메이션 효과를 추가하는 방법을 간략히 설명했습니다. 플러터는 다양한 위젯과 애니메이션 기능을 제공하므로, 상황에 맞게 적절한 위젯과 애니메이션 효과를 활용하여 아름다운 UI를 구성할 수 있습니다.