Colin's Blog
[flutter] AnimatedContainer의 크기 속성을 이용한 확대/축소 애니메이션 구현하기

Flutter에서 애니메이션을 구현하는 여러 가지 방법 중 하나는 AnimatedContainer 위젯을 사용하여 경과 시간에 따라 컨테이너의 크기를 조정하는 것입니다. 이 기능을 활용하여 화면 요소들의 확대/축소 애니메이션을 만들 수 있습니다.

AnimatedContainer 소개

AnimatedContainer는 애니메이션이 발생할 때 자동으로 크기, 위치 및 속성을 조정하는 데 사용되는 Flutter의 내장 위젯 중 하나입니다. 이를 통해 간단한 코드로 다양한 애니메이션 효과를 쉽게 구현할 수 있습니다.

확대/축소 애니메이션 구현하기

다음은 AnimatedContainer를 사용하여 확대/축소 애니메이션을 구현하는 예제 코드입니다.

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 _isEnlarged = false;

  void _toggleSize() {
    setState(() {
      _isEnlarged = !_isEnlarged;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('확대/축소 애니메이션'),
      ),
      body: Center(
        child: GestureDetector(
          onTap: _toggleSize,
          child: AnimatedContainer(
            duration: Duration(seconds: 1),
            curve: Curves.fastOutSlowIn,
            width: _isEnlarged ? 200 : 100,
            height: _isEnlarged ? 200 : 100,
            color: Colors.blue,
            child: Center(child: Text('탭하여 크기 변경')),
          ),
        ),
      ),
    );
  }
}

위 코드는 먼저 MyApp 클래스를 통해 앱을 시작하고, MyHomePage 위젯을 홈 페이지로 설정합니다. 그리고 _MyHomePageState 클래스에서 AnimatedContainer를 사용하여 확대/축소 애니메이션을 구현합니다. GestureDetector를 이용하여 터치 이벤트가 발생하면 _toggleSize 메서드가 호출되어 _isEnlarged 상태를 토글합니다.

애니메이션이 발생할 때 AnimatedContainer의 width와 height 속성을 _isEnlarged 값에 따라 변경하도록 설정하고, duration 및 curve 속성을 사용하여 애니메이션의 지속 시간과 속도 곡선을 설정합니다.

이렇게 구현한 예제에서는 화면을 터치할 때 AnimatedContainer가 부드럽게 확대/축소되는 애니메이션을 볼 수 있습니다.

마무리

AnimatedContainer를 사용하면 코드를 간결하게 유지하면서도 다양한 확대/축소 애니메이션을 쉽게 구현할 수 있습니다. 애니메이션을 통해 사용자 경험을 향상시키고 앱에 동적인 요소를 추가하는 데 유용하게 활용할 수 있습니다.

참고 문헌:

© 2018 Colin. All rights reserved.