[flutter] AnimatedContainer를 이용한 다양한 모양의 애니메이션 구현하기

08 Dec 2023

flutter

Flutter 앱을 개발할 때 애니메이션은 사용자 경험을 향상시키고 앱을 더 동적으로 만드는 데 중요한 역할을 합니다. AnimatedContainer 위젯은 Flutter에서 애니메이션을 구현하기 위한 편리한 방법을 제공합니다. 이 기사에서는 AnimatedContainer를 사용하여 어떻게 다양한 모양의 애니메이션을 구현할 수 있는지 살펴보겠습니다.

목표

이 기사에서는 AnimatedContainer를 이용하여 다음과 같은 다양한 모양의 애니메이션을 구현하는 방법에 대해 다룹니다.

컨테이너의 크기 변경하기
배경색과 모서리 반지름 변경하기
애니메이션 지속 시간 및 곡선 적용하기

시작하기

AnimatedContainer를 사용하려면 flutter 패키지를 프로젝트에 추가해야 합니다.

flutter pub add flutter

또는 pubspec.yaml 파일에 직접 flutter 패키지를 추가할 수 있습니다.

dependencies:
  flutter: ^버전

애니메이션 구현하기

1. 컨테이너의 크기 변경하기

다음은 너비와 높이를 무작위로 변경하여 애니메이션을 만드는 예제 코드입니다.

import 'dart:math';
import 'package:flutter/material.dart';

class AnimatedContainerDemo extends StatefulWidget {
  @override
  _AnimatedContainerDemoState createState() => _AnimatedContainerDemoState();
}

class _AnimatedContainerDemoState extends State<AnimatedContainerDemo> {
  double _width = 50.0;
  double _height = 50.0;
  final _random = Random();

  void _randomizeSize() {
    setState(() {
      _width = _random.nextDouble() * 200 + 50;
      _height = _random.nextDouble() * 200 + 50;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: GestureDetector(
          onTap: _randomizeSize,
          child: AnimatedContainer(
            width: _width,
            height: _height,
            duration: Duration(milliseconds: 500),
            color: Colors.blue,
          ),
        ),
      ),
    );
  }
}

2. 배경색과 모서리 반지름 변경하기

다음은 배경색과 모서리 반지름을 변경하여 애니메이션을 만드는 예제 코드입니다.

class _AnimatedContainerDemoState extends State<AnimatedContainerDemo> {
  Color _color = Colors.blue;
  double _borderRadius = 0;

  void _changeProperties() {
    setState(() {
      _color = _color == Colors.blue ? Colors.red : Colors.blue;
      _borderRadius = _borderRadius == 0 ? 20 : 0;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: GestureDetector(
          onTap: _changeProperties,
          child: AnimatedContainer(
            width: 200.0,
            height: 200.0,
            duration: Duration(milliseconds: 500),
            color: _color,
            curve: Curves.easeInOut,
            borderRadius: BorderRadius.circular(_borderRadius),
          ),
        ),
      ),
    );
  }
}

3. 애니메이션 지속 시간 및 곡선 적용하기

애니메이션의 지속 시간과 곡선을 적용하는 예제 코드는 다음과 같습니다.

class _AnimatedContainerDemoState extends State<AnimatedContainerDemo> {
  Color _color = Colors.blue;
  double _borderRadius = 0;

  void _changeProperties() {
    setState(() {
      _color = _color == Colors.blue ? Colors.red : Colors.blue;
      _borderRadius = _borderRadius == 0 ? 20 : 0;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: GestureDetector(
          onTap: _changeProperties,
          child: AnimatedContainer(
            width: 200.0,
            height: 200.0,
            duration: Duration(seconds: 1),
            curve: Curves.fastOutSlowIn,
            color: _color,
            borderRadius: BorderRadius.circular(_borderRadius),
          ),
        ),
      ),
    );
  }
}

결론

Flutter의 AnimatedContainer를 이용하여 애니메이션을 구현하는 방법에 대해 알아보았습니다. 다양한 애니메이션을 만들기 위해 견고한 기반을 제공하므로, Flutter 앱에서 애니메이션을 구현하는 데 이를 활용할 수 있습니다.

더 많은 사용 예제와 자세한 문서는 Flutter 공식 문서에서 확인할 수 있습니다.