pretty_animated_text 1.0.3

A Flutter plugin for creating customizable animated text widgets, enhancing app aesthetics with engaging text animations.

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