[flutter] 애니메이션을 사용한 텍스트 시각 효과 구현 방법

11 Dec 2023

flutter

플러터(Flutter)를 사용하면 텍스트를 효과적으로 시각적으로 표현할 수 있습니다. 특히, 애니메이션을 사용하여 텍스트를 부드럽게 변화시키는 효과를 줄 수 있습니다. 이번 블로그에서는 플러터를 사용하여 애니메이션을 적용하여 텍스트 시각 효과를 구현하는 방법에 대해 알아보겠습니다.

1. 애니메이션 기초 설정

먼저, 애니메이션을 적용하기 위한 기초적인 설정을 해야 합니다. 이를 위해 flutter animation 패키지를 이용해야 합니다. 다음은 애니메이션을 사용하기 위한 기초적인 설정 코드입니다.

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('텍스트 애니메이션'),
        ),
        body: Center(
          child: MyAnimatedText(),
        ),
      ),
    );
  }
}

class MyAnimatedText extends StatefulWidget {
  @override
  _MyAnimatedTextState createState() => _MyAnimatedTextState();
}

class _MyAnimatedTextState extends State<MyAnimatedText> with SingleTickerProviderStateMixin {
  
  AnimationController _controller;
  Animation<double> _animation;

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

  @override
  Widget build(BuildContext context) {
    return Container(
      height: _animation.value,
      child: Center(
        child: Text(
          '애니메이션을 사용한 텍스트',
          style: TextStyle(fontSize: 24.0),
        ),
      ),
    );
  }

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

위 코드는 기본적인 애니메이션을 적용한 텍스트를 화면에 표시하는 예시입니다.

2. 추가적인 텍스트 애니메이션 구현

위의 기본 설정을 토대로, 텍스트 애니메이션을 더 다양하게 구현할 수 있습니다. 예를 들어, 텍스트의 색상이나 크기를 변화시키거나, 다양한 애니메이션 효과를 적용할 수 있습니다.

class MyAnimatedText extends StatefulWidget {
  @override
  _MyAnimatedTextState createState() => _MyAnimatedTextState();
}

class _MyAnimatedTextState extends State<MyAnimatedText> with SingleTickerProviderStateMixin {
  
  AnimationController _controller;
  Animation<double> _animation;
  Animation<Color> _colorAnimation;
  Animation<double> _sizeAnimation;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: Duration(seconds: 2),
      vsync: this,
    );

    _animation = Tween<double>(begin: 0, end: 300).animate(_controller)
      ..addListener(() {
        setState(() {});
      });
    
    _colorAnimation = ColorTween(begin: Colors.red, end: Colors.blue)
      .animate(_controller);

    _sizeAnimation = Tween<double>(begin: 20, end: 40).animate(_controller);

    _controller.forward();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      height: _animation.value,
      child: Center(
        child: Text(
          '애니메이션을 사용한 텍스트',
          style: TextStyle(
            fontSize: _sizeAnimation.value,
            color: _colorAnimation.value,
          ),
        ),
      ),
    );
  }

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

위의 코드에서는 추가적으로 색상과 크기에 애니메이션을 적용하여 텍스트를 더 다양하게 시각적으로 표현하고 있습니다.

마치며

플러터를 사용하여 애니메이션을 적용한 텍스트 시각 효과를 구현하는 방법에 대해 알아보았습니다. 애니메이션을 적용함으로써 텍스트를 보다 동적으로 표현할 수 있습니다. 여러 가지 효과를 결합하거나 커스터마이징하여 원하는 시각적인 효과를 구현할 수 있습니다.

참고 문서: Flutter Animation