[flutter] 플러터 AnimatedContainer 소개

08 Dec 2023

flutter

플러터는 아름다운 모바일 앱을 만들기 위한 강력한 프레임워크로, 다양한 위젯을 제공합니다. 이 중 AnimatedContainer 위젯은 애니메이션을 쉽게 추가할 수 있는 강력한 기능을 제공합니다.

AnimatedContainer란 무엇인가요?

AnimatedContainer는 플러터에서 제공되는 위젯 중 하나로, 컨테이너의 속성을 변경할 때 부드러운 애니메이션을 제공합니다. 예를 들어, 컨테이너의 크기, 색상 또는 여백을 변경할 때 애니메이션 효과를 쉽게 적용할 수 있습니다.

사용 예시

다음은 AnimatedContainer를 사용하여 간단한 애니메이션 효과를 적용하는 예시 코드입니다.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('AnimatedContainer 예시'),
        ),
        body: Center(
          child: MyAnimatedContainer(),
        ),
      ),
    );
  }
}

class MyAnimatedContainer extends StatefulWidget {
  @override
  _MyAnimatedContainerState createState() => _MyAnimatedContainerState();
}

class _MyAnimatedContainerState extends State<MyAnimatedContainer> {
  bool _isBig = false;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        setState(() {
          _isBig = !_isBig;
        });
      },
      child: AnimatedContainer(
        duration: Duration(seconds: 1),
        curve: Curves.fastOutSlowIn,
        color: _isBig ? Colors.blue : Colors.red,
        width: _isBig ? 200.0 : 100.0,
        height: _isBig ? 200.0 : 100.0,
        child: Center(
          child: Text(
            '탭하여 크기 변경',
            style: TextStyle(color: Colors.white),
          ),
        ),
      ),
    );
  }
}

위 코드는 AnimatedContainer를 사용하여 탭할 때마다 컨테이너의 크기와 색상을 변경하도록 구현되어 있습니다.

AnimatedContainer를 사용하면 사용자 터치에 반응하는 부드러운 애니메이션 효과를 쉽게 구현할 수 있습니다. 이를 통해 앱의 사용자 경험을 향상시킬 수 있습니다.

결론

AnimatedContainer는 플러터에서 애니메이션 효과를 쉽게 추가할 수 있는 강력한 위젯 중 하나입니다. 컨테이너의 속성을 변경할 때 부드러운 애니메이션을 적용하여 사용자에게 더 흥미로운 경험을 제공할 수 있습니다.

플러터의 더 많은 위젯과 기능에 대해 알아보려면 플러터 공식 문서를 참고하시기 바랍니다.