59. [Flutter] AnimatedContainer 사용하기 (컨테이너 애니메이션 효과)

 

AnimatedContainer

AnimatedContainer 를 사용하면 Container 의 애니메이션 효과를 쉽게 적용할 수 있습니다.

"?" 연산자인 삼항조건 연산자를 사용하거난 if문 등 조건문을 이용하여 Container의 값을 조건별로 준다면, 자동으로 애니메이션 효과가 적용됩니다.

transform: Matrix4.rotationZ(_visible ? 1 : 0),

BorderRadius.all(Radius.circular(_visible ? 50 : 0))),

color: _visible ? Colors.red : Colors.blue,

예시 소스

import 'package:flutter/material.dart';

class ImplicitAnimationScreen extends StatefulWidget {
  const ImplicitAnimationScreen({super.key});
  static String routeName = "implicitanimation";
  static String routeURL = "implicitanimation";

  @override
  State<ImplicitAnimationScreen> createState() =>
      _ImplicitAnimationScreenState();
}

class _ImplicitAnimationScreenState extends State<ImplicitAnimationScreen> {
  bool _visible = true;

  void _trigger() {
    setState(() {
      _visible = !_visible;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        elevation: 0,
        title: const Text("Implict Animations"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            AnimatedContainer(
              transform: Matrix4.rotationZ(_visible ? 1 : 0),
              transformAlignment: Alignment.center,
              curve: Curves.linear,
              duration: const Duration(
                milliseconds: 200,
              ),
              width: 100,
              height: 100,
              decoration: BoxDecoration(
                  color: _visible ? Colors.red : Colors.blue,
                  borderRadius:
                      BorderRadius.all(Radius.circular(_visible ? 50 : 0))),
            ),
            ElevatedButton(
              onPressed: _trigger,
              child: const Text("Start Animate"),
            ),
          ],
        ),
      ),
    );
  }
}

 

소스설명.

1. AnimatedContainer: 애니메이션 효과를 가진 컨테이너를 생성합니다. 이 컨테이너는 특정 지속 시간 동안에 속성이 변경될 때마다 부드럽게 애니메이션을 적용합니다.
   • transform: 컨테이너의 변환(transform)을 설정합니다. 여기서는 _visible 변수에 따라 도형이 회전하도록 설정되었습니다. **_visible**가 **true**이면 1, 즉 45도 회전하고, **false**이면 0, 즉 회전하지 않습니다.
   • transformAlignment: Alignment 타입의 속성으로, transform 속성의 변형을 적용할 중심점을 정의합니다. 여기서는 중앙을 기준으로 회전하도록 하고 있습니다.
   • duration: 애니메이션의 지속 시간을 설정합니다. 여기서는 200 밀리초로 설정되어 있어, 속성이 변경될 때마다 0.2초 동안 애니메이션을 적용합니다.
   • width, height: 컨테이너의 너비와 높이를 설정합니다. 이 값들도 애니메이션에 의해 변경될 수 있습니다.
   • decoration: 컨테이너의 장식을 설정합니다. 여기서는 _visible 변수에 따라 배경색과 경계의 모양을 변경하도록 설정되었습니다. **_visible**가 **true**이면 빨간색 배경과 원형 경계를, **false**이면 파란색 배경과 사각형 경계를 가지게 됩니다.
   • curve:Curves.linear : 컨테이너 애니메이션 변화 속도를 조절합니다. linear는 평이한 속도로 변형됨을 말합니다.
2. ElevatedButton: 애니메이션을 트리거하는 버튼입니다. 이 버튼을 누르면 _trigger 함수가 호출되어 _visible 변수의 상태를 변경하고, 이로 인해 애니메이션 효과가 발생합니다.

---

curve: 속성 변환 예시.