Flutter의 AnimatedContainer 위젯은 기존의 Container 위젯과 달리 속성이 변화할 때 자연스러운 애니메이션 효과를 제공합니다. 이번 포스트에서는 AnimatedContainer의 컬러 속성을 이용하여 배경색을 변경하는 애니메이션에 대해 알아보겠습니다.

1. AnimatedContainer 소개

AnimatedContainer는 width, height, color, padding 등의 속성이 변경될 때 자동으로 애니메이션을 적용해주는 위젯입니다. 이를 통해 애니메이션 기능을 쉽게 구현할 수 있습니다.

2. 배경색 변경 애니메이션 구현 방법

import 'package:flutter/material.dart';

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  bool _isBlue = true;

  void _changeColor() {
    setState(() {
      _isBlue = !_isBlue;
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Animated Background Color'),
        ),
        body: Center(
          child: GestureDetector(
            onTap: () {
              _changeColor();
            },
            child: AnimatedContainer(
              duration: Duration(seconds: 1),
              width: 200,
              height: 200,
              color: _isBlue ? Colors.blue : Colors.red,
            ),
          ),
        ),
      ),
    );
  }
}

위 코드는 AnimatedContainer를 사용하여 배경색을 변경하는 애니메이션을 구현한 예시입니다. 먼저 StatefulWidget을 상속받는 MyApp 클래스를 정의하고, _MyAppState 클래스를 통해 상태를 관리합니다. 배경색을 변경하는 함수인 _changeColor() 메서드와 기본 색을 blue로 설정하는 _isBlue 상태 변수가 정의되어 있습니다.

화면에는 GestureDetector를 이용하여 터치 이벤트를 감지하고, 이벤트 발생 시에 _changeColor() 함수를 호출하여 배경색을 변경합니다. 변경된 배경색은 AnimatedContainer를 통해 부드러운 애니메이션 효과와 함께 적용됩니다.

3. 결론

Flutter의 AnimatedContainer를 사용하면 간편하게 다양한 애니메이션 효과를 적용할 수 있습니다. 배경색을 변경하는 예시를 통해 간단한 애니메이션 구현 방법을 살펴보았습니다. 다양한 상태 변화에 따른 애니메이션 효과를 적용할 때 AnimatedContainer를 유용하게 활용할 수 있습니다.

참조:

• Flutter 공식 문서: https://flutter.dev/docs
• AnimatedContainer 클래스 문서: https://api.flutter.dev/flutter/widgets/AnimatedContainer-class.html