애니메이션은 사용자 경험을 향상시키는 데 있어서 매우 중요합니다. Flutter의 AnimatedContainer를 사용하면 간단한 코드로 UI 요소에 애니메이션을 추가할 수 있습니다. 이번 블로그 포스트에서는 Flutter 앱에 버튼 클릭 시 AnimatedContainer를 통해 애니메이션 효과를 추가하는 방법을 소개하겠습니다.

1. AnimatedContainer 이해하기

AnimatedContainer는 상태가 변경될 때 매끄러운 애니메이션 효과를 제공하는 Flutter 위젯 중 하나입니다. 주로 속성값(예: 크기, 색상, 모양 등)이 변경될 때 애니메이션을 적용할 때 사용됩니다.

2. 예시 코드

다음은 버튼 클릭 시 AnimatedContainer를 활용한 애니메이션 효과를 추가하는 예시 코드입니다.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  bool _isContainerExpanded = false;

  void _toggleContainer() {
    setState(() {
      _isContainerExpanded = !_isContainerExpanded;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('AnimatedContainer 예제'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            AnimatedContainer(
              duration: Duration(seconds: 1),
              width: _isContainerExpanded ? 200 : 100,
              height: _isContainerExpanded ? 200 : 100,
              color: _isContainerExpanded ? Colors.blue : Colors.green,
              curve: Curves.easeIn,
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: _toggleContainer,
              child: Text(_isContainerExpanded ? '축소하기' : '확대하기'),
            ),
          ],
        ),
      ),
    );
  }
}

위 예시 코드에서는 AnimatedContainer를 사용하여 버튼 클릭 시 컨테이너의 크기와 색상이 애니메이션 효과와 함께 변경되도록 구현되었습니다.

3. 코드 해설

• AnimatedContainer 위젯을 사용하여 애니메이션 효과를 적용합니다. duration으로 애니메이션 기간을 설정하고, width, height, color 등의 속성값에 상태에 따라 변화를 주어 애니메이션을 적용합니다.
• ElevatedButton 위젯을 추가하여 클릭 이벤트가 발생할 때 애니메이션을 트리거합니다.

이 예시 코드를 사용하면 버튼 클릭 시 AnimatedContainer를 활용한 매끄러운 애니메이션 효과를 경험할 수 있습니다.

애니메이션을 추가함으로써 Flutter 앱의 사용자 경험을 높일 수 있으며, AnimatedContainer는 이를 간단하게 구현할 수 있는 좋은 방법입니다.

위 예시 코드를 참고하여 본인의 Flutter 프로젝트에 애니메이션 효과를 추가해 보세요. 사용자들은 보다 매끄러운 UI 변화를 경험할 것입니다.

Happy coding! 😊

참고 자료 - AnimatedContainer 공식 문서 - Flutter.dev