[flutter] 단순한 애니메이션 효과를 위한 애니메이션 컨테이너 사용하기

11 Dec 2023

flutter

애니메이션 컨테이너란?

애니메이션 컨테이너는 시작과 끝 값 사이를 부드럽게 전환하는 애니메이션을 생성하는 데 사용됩니다. 이를 통해 위젯의 속성을 부드럽게 변화시키는 효과를 줄 수 있습니다.

애니메이션 컨테이너의 구성은 다음과 같습니다.

Container(
  child: AnimatedContainer(
    duration: Duration(milliseconds: 500),
    width: _isSelected ? 200.0 : 100.0,
    height: _isSelected ? 200.0 : 100.0,
    color: _isSelected ? Colors.red : Colors.blue,
  ),
)

위 예시에서 AnimatedContainer의 duration, width, height, color 등의 값들은 애니메이션 효과와 함께 변경되는 속성들입니다.

애니메이션 컨테이너 사용 예시

다음은 애니메이션 컨테이너를 사용하여 버튼을 클릭할 때 애니메이션 효과를 주는 예시입니다.

import 'package:flutter/material.dart';

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('애니메이션 컨테이너 예제'),
        ),
        body: Center(
          child: GestureDetector(
            onTap: () {
              setState(() {
                _isSelected = !_isSelected;
              });
            },
            child: Container(
              child: AnimatedContainer(
                duration: Duration(milliseconds: 500),
                width: _isSelected ? 200.0 : 100.0,
                height: _isSelected ? 200.0 : 100.0,
                color: _isSelected ? Colors.red : Colors.blue,
              ),
            ),
          ),
        ),
      ),
    );
  }
}

위 코드는 사용자가 버튼을 클릭할 때마다 너비와 높이, 색상이 변경되는 애니메이션 컨테이너를 보여줍니다.

이렇게 사용자 인터랙션에 따라 부드러운 애니메이션을 만들기 위해, Flutter 개발에서 애니메이션 컨테이너를 사용하는 것이 매우 효과적입니다.

더 자세한 내용은 Flutter 공식문서를 참고해 주세요!