플러터 타이핑 애니메이션 효과 적용하기 flutter animated_text_kit

 

타자로 타이핑 한 것 같은 효과를 내보자

---

내가 만든 예제

여기 공구 관리 시스템 문자가 너무 심심해보인다.

있어 보이는 것처럼 하기위해 타이핑 효과를 추가해보자!

animated_text_kit

animated_text_kit (Flutter Package of the Week) - YouTube

1. installing

dependencies:
  animated_text_kit: ^4.2.1

pubspec.yaml 파일에 추가한다.

flutter pub get 한후

 

2. usage

class CourseDetails extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: 600,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Text(
            '공구관리 시스템.\n 새롭게',
            style: TextStyle(
                fontWeight: FontWeight.w800, height: 1.2, fontSize: 80),
          ),
          SizedBox(
            height: 30,
          ),
          Text(
            'NFC 태그를 이용한 공구 추적 \n'
            '관리자로서 손쉽게 공구 관리하세요.',
            style: TextStyle(fontSize: 21, height: 1.7),
          )
        ],
      ),
    );
  }
}

위의 코드에서 

  Text(

            '공구관리 시스템.\n 새롭게',

            style: TextStyle(

                fontWeight: FontWeight.w800, height: 1.2, fontSize: 80),

          ),

해당 부분에 애니메이션을 적용할 것이다. 

import 'package:animated_text_kit/animated_text_kit.dart';

맨위에서 패키지를 import 해온다 .

class CourseDetails extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: 600,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          // Text(
          //   '공구관리 시스템.\n 새롭게',
          //   style: TextStyle(
          //       fontWeight: FontWeight.w800, height: 1.2, fontSize: 80),
          // ),
          SizedBox(
            height: 90,
            child: AnimatedTextKit(
              animatedTexts: [
                TypewriterAnimatedText(
                  '공구관리 시스템\n새롭게',
                  textStyle: const TextStyle(
                    fontSize: 32.0,
                    fontWeight: FontWeight.bold,
                  ),
                  speed: const Duration(milliseconds: 200),
                ),
              ],
              repeatForever: true,
              pause: const Duration(milliseconds: 100),
              displayFullTextOnTap: true,
              stopPauseOnTap: false,
            ),
          ),
          SizedBox(
            height: 30,
          ),
          Text(
            'NFC 태그를 이용한 공구 추적 \n'
            '관리자로서 손쉽게 공구 관리하세요.',
            style: TextStyle(fontSize: 21, height: 1.7),
          )
        ],
      ),
    );
  }
}

이렇게 적용했다

주의해야하는 점은 두줄 일 경우 높이가 변하기 떄문에 sized 박스에 묶어서 보내는게 좋을 것 같다. 

 

 

뭐 대충 이렇게 했지만 

animated_text_kit | Flutter Package (pub.dev)

animated_text_kit | Flutter Package

좋은 예제들 많으니까 참고하시길