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

11 Dec 2023

flutter

플러터(Flutter)를 사용하면 애니메이션을 활용하여 텍스트에 시각적인 효과를 추가할 수 있습니다. 이를 위해 애니메이션과 텍스트 위젯을 조합하여 다양한 효과를 구현할 수 있습니다. 이제 간단한 예제를 통해 플러터에서 애니메이션을 사용하여 텍스트에 시각적인 효과를 구현하는 방법을 알아보겠습니다.

예제: 텍스트가 서서히 나타나는 효과 구현하기

아래 예제에서는 애니메이션을 사용하여 텍스트가 서서히 나타나는 효과를 구현합니다.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: TextAnimationExample(),
    );
  }
}

class TextAnimationExample extends StatefulWidget {
  @override
  _TextAnimationExampleState createState() => _TextAnimationExampleState();
}

class _TextAnimationExampleState extends State<TextAnimationExample> with SingleTickerProviderStateMixin {
  AnimationController _controller;
  Animation<double> _animation;

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

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

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

이 예제에서는 AnimationController와 Animation을 이용하여 2초 동안 문구 나타내기 기능을 구현했습니다. 위 예제를 실행하면, 화면에 ‘애니메이션을 사용한 텍스트 효과’라는 문구가 서서히 나타나는 효과를 확인할 수 있습니다.

위 예제를 통해 플러터에서 애니메이션을 사용하여 텍스트에 시각적인 효과를 구현할 수 있다는 것을 알아보았습니다. 다양한 애니메이션 효과와 텍스트 스타일을 조합하여 보다 다채로운 텍스트 시각효과를 구현할 수 있습니다.

더 많은 정보와 예제는 플러터 공식 문서를 참고하시기 바랍니다.

참고 자료

Flutter 공식 문서 - 애니메이션