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

11 Dec 2023

flutter

텍스트 애니메이션은 사용자 경험을 향상시키는 데 중요한 역할을 합니다. Flutter를 활용하여 텍스트에 시각적 효과를 적용하는 방법에 대해 알아보겠습니다.

1. 기본적인 텍스트 애니메이션

Flutter에서 텍스트에 애니메이션을 적용하는 가장 간단한 방법은 AnimatedDefaultTextStyle 위젯을 사용하는 것입니다. 이 위젯을 이용하면 텍스트의 스타일을 부드럽게 변경할 수 있습니다. 아래는 간단한 예제 코드입니다.

import 'package:flutter/material.dart';

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

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

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  bool _isScaled = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('텍스트 애니메이션'),
      ),
      body: Center(
        child: GestureDetector(
          onTap: () {
            setState(() {
              _isScaled = !_isScaled;
            });
          },
          child: AnimatedDefaultTextStyle(
            style: _isScaled
                ? TextStyle(fontSize: 40, color: Colors.blue)
                : TextStyle(fontSize: 20, color: Colors.red),
            duration: Duration(seconds: 1),
            curve: Curves.fastOutSlowIn,
            child: Text('애니메이션 효과'),
          ),
        ),
      ),
    );
  }
}

위 코드는 사용자가 텍스트를 탭할 때마다 텍스트의 크기와 색상을 부드럽게 변경하는 간단한 예제입니다.

2. 보다 복잡한 텍스트 애니메이션

더 다채로운 텍스트 애니메이션을 구현하려면 AnimatedBuilder나 AnimationController를 사용할 수 있습니다. 이것들을 이용하면 사용자 정의된 애니메이션을 만들 수 있습니다.

// 필요한 패키지 import
import 'package:flutter/material.dart';

// 애플리케이션 시작점
void main() {
  runApp(MyApp());
}

// 애플리케이션의 루트 위젯
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

// 홈 화면 위젯
class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage>
    with SingleTickerProviderStateMixin {
  AnimationController _controller;
  Animation<Offset> _animation;

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

    _animation = Tween(
      begin: Offset(-1.0, 0.0),
      end: Offset(0.0, 0.0),
    ).animate(CurvedAnimation(
      parent: _controller,
      curve: Curves.fastOutSlowIn,
    ));

    _controller.forward();
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('텍스트 애니메이션'),
      ),
      body: Center(
        child: SlideTransition(
          position: _animation,
          child: Text(
            '애니메이션 효과',
            style: TextStyle(fontSize: 30, fontWeight: FontWeight.bold),
          ),
        ),
      ),
    );
  }
}

위 코드는 왼쪽에서 오른쪽으로 텍스트가 나타나는 애니메이션을 구현하는 예제입니다.

결론

Flutter를 사용하면 간단한 텍스트 애니메이션부터 사용자 정의된 애니메이션까지 다양한 효과를 쉽게 구현할 수 있습니다. 사용자 경험을 향상시키고 애플리케이션에 동적인 요소를 추가하기 위해 텍스트 애니메이션을 적절히 활용해 보세요.