Pretty Animated Text

Overview

A text animation UI plugin that provides you with gorgeous and customizable animated text widgets so that you can use them effortlessly in your project.

Physics-based animations are utilized for text animations, providing a smooth and delightful experience.

This project heavily inspires on jasudev's AnimateText for SwiftUI package

Preview Website

Link: https://pretty-animated-text.vercel.app

️ Key Features:

• Various text animation types:
  • Spring animation
  • Chime bell animation
  • Scale animation
  • Rotate animation
  • Blur animation
  • Offset (slide) animation
• Supports both letter-by-letter and word-by-word animations
• Customizable animation duration and styles
• Easy to integrate into existing Flutter projects

️ Installation

To use this package, add pretty_animated_text as a dependency in your pubspec.yaml file:

flutter pub add pretty_animated_text

️ How to

There are two main animation types that you can trigger.

• for word by word → AnimationType.word
• for letter by letter → AnimationType.letter

And for texts such as RotateText and OffsetText, you can trigger some more variations like rotation direction and slide offset.

Currently, the plugin supports 6 alignment styles.

• TextAlignment.start
• TextAlignment.center
• TextAlignment.end
• TextAlignment.spaceAround
• TextAlignment.spaceBetween
• TextAlignment.spaceEvenly

See the demos and examples below:

Type	Word Animation	Letter Animation
Spring Text
Chime Bell Text		️
Scale Text
Blur Text
Rotate Text (clockwise)
Rotate Text (anti-clockwise)
Offest Text (top-bottom)
Offest Text (bottom-top)
Offest Text (alternate top-bottom)
Offest Text (left-right)
Offest Text (right-left)
Offest Text (alternate left-right)		️

Code Examples

• Spring Text

  SpringText(
        text: 'Lorem ipsum dolor sit amet ...',
        duration: const Duration(seconds: 4), 
        type: AnimationType.word,
        textStyle: const TextStyle(fontSize: 18),
      )

• Chime Bell Text

  ChimeBellText(
      text: 'Lorem ipsum dolor sit amet ...',
      duration: const Duration(seconds: 4), 
      type: AnimationType.word,
      textStyle: const TextStyle(fontSize: 18),
    ),

• Scale Text

  ScaleText(
      text: 'Lorem ipsum dolor sit amet ...',
      duration: const Duration(seconds: 4), 
      type: AnimationType.word,
      textStyle: const TextStyle(fontSize: 18),
    ),

• Blur Text

  BlurText(
      text: 'Lorem ipsum dolor sit amet ...',
      duration: const Duration(seconds: 4), 
      type: AnimationType.word,
      textStyle: const TextStyle(fontSize: 18),
    ),

• Rotate Text

  For RotateText, you can tweak two rotation directions.

  • clockwise → RotateAnimationType.clockwise (default)
  • anti-clockwise → RotateAnimationType.anticlockwise

  RotateText(
      text: 'Lorem ipsum dolor sit amet ...',
      direction: RotateAnimationType.clockwise,
      duration: const Duration(seconds: 4), 
      type: AnimationType.word,
      textStyle: const TextStyle(fontSize: 18),
    ),

• Offset Text

  OffsetText has multiple slide effects that you can tweak according to your needs.

  • Top to bottom → SlideAnimationType.topBottom (default)
  • Bottom to top → SlideAnimationType.bottomTop
  • Alternate top-bottom → SlideAnimationType.alternateTB
  • Left to right → SlideAnimationType.leftRight
  • Right to left → SlideAnimationType.rightLeft
  • Alternate left-right → SlideAnimationType.alternateLR

  OffsetText(
      text: 'Lorem ipsum dolor sit amet ...',
      duration: const Duration(seconds: 4), 
      type: AnimationType.word,
      slideType: SlideAnimationType.topBottom,
      textStyle: const TextStyle(fontSize: 18),
    ),

️ Project License:

This project is licensed under MIT License.

Feel free to check it out and give it a ️ if you love it. Follow me for more updates and more projects

Suggestions are warmly welcome & more updates are coming along the way ... ️

Copyright (©️) 2024 YE LWIN OO