pretty_animated_text 1.0.1

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

Pretty Animated Text

[assets/Telescope.webp] 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

[assets/Spider Web.webp] Preview Website

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

[assets/Rocket.png]️ 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

[assets/Fire.png]️ Installation

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

flutter pub add pretty_animated_text

[assets/Comet.png]️ 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	[assets/gifs/words/w_spring_text.gif]️	[assets/gifs/letters/spring_text.gif]️
Chime Bell Text	[assets/gifs/words/w_chime_bell_text.gif]️	[assets/gifs/letters/chime_bell_text.gif]️
Scale Text	[assets/gifs/words/w_scale_text.gif]️	[assets/gifs/letters/scale_text.gif]️
Blur Text	[assets/gifs/words/w_blur_text.gif]️	[assets/gifs/letters/blur_text.gif]️
Rotate Text (clockwise)	[assets/gifs/words/w_rotate_text_clockwise.gif]️	[assets/gifs/letters/rotate_text_clockwise.gif]️
Rotate Text (anti-clockwise)	[assets/gifs/words/w_rotate_text_anticlockwise.gif]️	[assets/gifs/letters/rotate_text_anticlockwise.gif]️
Offest Text (top-bottom)	[assets/gifs/words/w_offset_text_top_bottom.gif]️	[assets/gifs/letters/offset_text_top_bottom.gif]️
Offest Text (bottom-top)	[assets/gifs/words/w_offset_text_bottom_top.gif]️	[assets/gifs/letters/offset_text_bottom_top.gif]️
Offest Text (alternate top-bottom)	[assets/gifs/words/w_offset_text_alternate_tb.gif]️	[assets/gifs/letters/offset_text_alternate_tb.gif]️
Offest Text (left-right)	[assets/gifs/words/w_offset_text_left_right.gif]️	[assets/gifs/letters/offset_text_left_right.gif]️
Offest Text (right-left)	[assets/gifs/words/w_offset_text_right_left.gif]️	[assets/gifs/letters/offset_text_right_left.gif]️
Offest Text (alternate left-right)	[assets/gifs/words/w_offset_text_alternate_lr.gif]️	[assets/gifs/letters/offset_text_alternate_lr.gif]️

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),
      ),
  

[assets/Eyes.png]️ Project License:

This project is licensed under MIT License.

Feel free to check it out and give it a [assets/Star.png]️ if you love it. Follow me for more updates and more projects

Suggestions are warmly welcome & more updates are coming along the way ... [assets/Folded Hands Medium Skin Tone.png]️

Copyright (©️) 2024 YE LWIN OO