[flutter] AnimatedContainer의 이동 속성을 이용한 이동 애니메이션 구현하기

08 Dec 2023

flutter

Flutter의 AnimatedContainer는 UI 요소의 속성을 부드럽게 애니메이션화할 수 있는 편리한 기능을 제공합니다. 이 기능을 이용하여 UI 요소를 부드럽게 이동하는 애니메이션을 구현할 수 있습니다.

이 포스트에서는 AnimatedContainer의 이동 속성을 활용하여 간단한 이동 애니메이션을 구현하는 방법을 알아보겠습니다.

AnimatedContainer 소개

AnimatedContainer는 Flutter의 애니메이션 기능을 제공하는 위젯으로, 크기, 색상, 모양 등의 속성을 변경할 때 애니메이션 효과를 주는 데 사용됩니다.

이동 애니메이션 구현하기

먼저, 이동 애니메이션을 구현하기 위해 AnimatedContainer를 사용하여 UI 요소를 이동시킬 수 있습니다.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  bool _isMoved = false;

  void _moveContainer() {
    setState(() {
      _isMoved = !_isMoved;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('이동 애니메이션'),
      ),
      body: Center(
        child: GestureDetector(
          onTap: _moveContainer,
          child: AnimatedContainer(
            duration: Duration(seconds: 1),
            curve: Curves.easeIn,
            width: _isMoved ? 200 : 100,
            height: _isMoved ? 200 : 100,
            color: _isMoved ? Colors.blue : Colors.red,
            alignment: _isMoved ? Alignment.center : Alignment.bottomRight,
            child: Text('이동', style: TextStyle(color: Colors.white)),
          ),
        ),
      ),
    );
  }
}

위의 코드는 AnimatedContainer를 사용하여 터치 이벤트에 따라 UI 요소를 부드럽게 이동하는 애니메이션을 구현한 예시입니다.

결론

Flutter의 AnimatedContainer를 이용하면 UI 요소의 속성을 변경할 때 애니메이션 효과를 부드럽게 적용할 수 있습니다. 이를 활용하여 다양한 이동 애니메이션을 구현할 수 있으며, 사용자에게 더 나은 사용 경험을 제공할 수 있습니다.

이렇게 AnimatedContainer의 이동 속성을 활용하여 이동 애니메이션을 구현하는 방법을 알아보았습니다. Flutter의 다양한 애니메이션 기능을 활용하여 더 다채로운 사용자 인터페이스를 구현해보세요.