[flutter] 애니메이션을 사용한 위젯 활성화 효과 구현 방법
애니메이션을 사용하여 위젯의 활성화 효과를 구현하는 방법에 대해 알아보겠습니다.
목차
애니메이션을 사용한 위젯 활성화 효과
애니메이션을 활용하여 위젯을 부드럽게 활성화 및 비활성화하는 효과를 줄 수 있습니다. 이는 사용자 경험을 향상시키고 앱의 시각적 매력을 높일 수 있습니다.
애니메이션 구현 방법
Flutter에서 위젯 활성화 효과를 구현하려면 AnimatedContainer나 AnimatedOpacity와 같은 애니메이션 위젯을 사용할 수 있습니다. 이러한 위젯들은 경과 시간에 따라 자동으로 변하는 속성 값을 가지고 있으며, 화면을 업데이트하여 부드러운 애니메이션 효과를 제공합니다.
아래는 AnimatedContainer를 사용한 간단한 활성화 효과의 예제 코드입니다.
예제 코드
import 'package:flutter/material.dart';
class AnimatedWidgetExample extends StatefulWidget {
@override
_AnimatedWidgetExampleState createState() => _AnimatedWidgetExampleState();
}
class _AnimatedWidgetExampleState extends State<AnimatedWidgetExample> {
bool _isActive = false;
@override
Widget build(BuildContext context) {
return GestureDetector(
onTap: () {
setState(() {
_isActive = !_isActive;
});
},
child: Center(
child: AnimatedContainer(
duration: Duration(milliseconds: 500),
width: _isActive ? 200.0 : 100.0,
height: _isActive ? 100.0 : 50.0,
color: _isActive ? Colors.blue : Colors.red,
child: Center(
child: Text(
_isActive ? '활성화됨' : '비활성화됨',
style: TextStyle(color: Colors.white),
),
),
),
),
);
}
}
위의 예제 코드에서는 AnimatedContainer를 사용하여 터치 시 위젯의 크기 및 색상을 애니메이션 효과로 변경하고 있습니다.