[flutter] AnimatedContainer를 이용한 크로스 페이드 애니메이션 구현하기

08 Dec 2023

flutter

Flutter는 다양한 애니메이션을 구현할 수 있는 강력한 기능을 제공합니다. 이번 포스트에서는 AnimatedContainer를 사용하여 이미지를 부드럽게 전환하는 크로스 페이드 애니메이션을 구현하는 방법을 알아보겠습니다.

1. 애니메이션 소개

크로스 페이드 애니메이션은 이미지나 콘텐츠를 부드럽게 전환하는 효과를 주는데 사용됩니다. 사용자 경험을 향상시키고, 전환을 자연스럽게 만들어줍니다.

2. AnimatedContainer란?

AnimatedContainer는 자식 위젯의 속성을 변경할 때 자연스럽게 애니메이션을 적용하는데 사용됩니다. duration, curve, color 등의 속성을 이용하여 다양한 애니메이션 효과를 쉽게 구현할 수 있습니다.

3. 코드 예시

다음은 AnimatedContainer를 사용하여 크로스 페이드 애니메이션을 구현하는 예시 코드입니다.

import 'package:flutter/material.dart';

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

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

class _MyAppState extends State<MyApp> {
  bool _crossFade = false;

  void _toggleCrossFade() {
    setState(() {
      _crossFade = !_crossFade;
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Cross Fade Animation'),
        ),
        body: Center(
          child: GestureDetector(
            onTap: () {
              _toggleCrossFade();
            },
            child: AnimatedContainer(
              duration: Duration(seconds: 1),
              curve: Curves.easeIn,
              width: _crossFade ? 200.0 : 100.0,
              height: _crossFade ? 100.0 : 200.0,
              color: _crossFade ? Colors.blue : Colors.green,
              child: _crossFade
                  ? Image.asset('assets/image1.png')
                  : Image.asset('assets/image2.png'),
            ),
          ),
        ),
      ),
    );
  }
}

위의 예시에서는 두 개의 이미지를 사용하여 크로스 페이드 애니메이션을 구현했습니다.

4. 마무리

AnimatedContainer를 사용하여 크로스 페이드 애니메이션을 구현하는 방법에 대해 알아보았습니다. 이를 응용하여 다양한 애니메이션 효과를 구현할 수 있으니, 창의적으로 활용해보시기 바랍니다.

이 글은 Flutter 공식 문서를 참고하여 작성되었습니다.