[Flutter] AnimatedContainer 애니메이션 위젯

Hero 위젯이 화면 전화시 애니메이션 효과를 지원했다면 AnimatedContainer 위젯은 한 화면 내에서 setState() 함수를 호출하여 화면을 새로 그릴 때 변경된 프로퍼티에 의해 애니메이션 되도록 해준다.

Container 위젯과 쓰임새는 비슷하지만 duration, curve 등의 애니메이션 관련 프로퍼티가 있다. duration 프로퍼티는 필수이며 애니메이션되는 데 걸리는 시간을 Duration 클래스를 사용해 정의할 수 있다. Curves 클래스에는 미리 정의된 여러 애니메이션 효과가 들어 있다.

AnimationContainer(
  duration: Duration(seconds: 1),  // 1초 동안 애니메이션 적용
  width: 100.0 // 가로 길이
  height: 150.0 // 세로 길이
  child: [위젯]
  curve: Curves.fastOutSlowIn,  // 미리 정의된 애니메이션 효과
),

다음 코드는 100x100 크기의 이미지를 탭하여 100 ~ 299 크기로 랜덤하게 크기가 변경되는 애니메이션 예제이다.

import 'package:flutter/material.dart';
import 'dart:math';  // Random 클래스 사용에 필요하다.

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: AnimatedContainerPageState(title: '플러터 테스트'),
    );
  }
}

class AnimatedContainerPageState extends StatefulWidget {
  AnimatedContainerPageState({Key key, this.title}) : super(key: key);
  final String title;

  @override
  _AnimatedContainerPageStateState createState() =>
      _AnimatedContainerPageStateState();
}

class _AnimatedContainerPageStateState
    extends State<AnimatedContainerPageState> {
  double _size = 100.0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: new Text(widget.title),
      ),
      body: Center(
        child: GestureDetector(
          onTap: () {
            // 랜덤 클래스
            final random = Random();
            setState(() {
              // 클릭할 때마다 100 ~ 299 사이의 실수를 랜덤하게 얻는다.
              _size = random.nextInt(200).toDouble() + 100;
            });
          },
          child: AnimatedContainer(
            duration: Duration(seconds: 1),
            width: _size,
            height: _size,
            child: Image.asset('assets/IMG_9245.jpeg'),
            curve: Curves.fastOutSlowIn,
          ),
        ),
      ),
    );
  }
}

setState() 함수에 의해 다시 그려질 때 AnimatedContainer 위젯은 이전 _size 값에서 새로 갱신된 _size 값까지 1초 동안 fastOutSlowIn에 정의된 효과가 적용되며 애니메이션된다.