[flutter] ScaleTransition을 이용한 크기 변화 애니메이션 구현하기

08 Dec 2023

flutter

이번에는 Flutter에서 ScaleTransition 위젯을 사용하여 위젯의 크기를 변화시키는 애니메이션을 구현하는 방법에 대해 알아보겠습니다.

ScaleTransition 이란?

ScaleTransition 위젯은 자식 위젯의 크기를 애니메이션으로 조절하는 데 사용됩니다. 이를 통해 위젯의 크기를 부드럽게 변화시킬 수 있습니다.

구현 방법

다음은 ScaleTransition를 사용하여 위젯의 크기를 조절하는 간단한 예제입니다.

import 'package:flutter/material.dart';

class ScaleAnimationWidget extends StatefulWidget {
  @override
  _ScaleAnimationWidgetState createState() => _ScaleAnimationWidgetState();
}

class _ScaleAnimationWidgetState extends State<ScaleAnimationWidget>
    with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<double> _animation;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      vsync: this,
      duration: Duration(seconds: 2),
    );
    _animation = Tween<double>(begin: 1, end: 2).animate(_controller)
      ..addListener(() {
        setState(() {});
      });
    _controller.forward();
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Scale Transition Animation'),
      ),
      body: Center(
        child: ScaleTransition(
          scale: _animation,
          child: Container(
            width: 100,
            height: 100,
            color: Colors.blue,
          ),
        ),
      ),
    );
  }
}

위의 코드는 ScaleTransition를 사용하여 화면 가운데에 파란색 정사각형을 표시하고, 애니메이션을 통해 정사각형의 크기를 변화시킵니다.

마치며

이번 포스트에서는 Flutter의 ScaleTransition을 사용하여 크기 변화 애니메이션을 구현하는 방법에 대해 알아보았습니다. ScaleTransition은 위젯의 크기를 변화시킬 때 부드러운 애니메이션 효과를 쉽게 구현할 수 있는 강력한 도구입니다. 이를 응용하여 사용자 인터페이스에 다양한 애니메이션 효과를 적용할 수 있습니다.