typewrite_text #

A typewriter text animation wrapper with customizations. Supports iOS, Android, web, Windows, macOS, and Linux.

Motivation #

While creating a website for myself, I decided to embellish it with a small yet striking text animation to give it extra allure. This little detail not only added beauty to my site but also brought dynamism, making it stand out among others. While there are some packages that offer almost what I need, they weren't quite sufficient for my vision.

Features #

• Allows to set up different delays for forward and reverse animation.
• Allows to set up different delays before animation starts and after animation ends.
• Can be used just in "forward" mode.
• Any unicode symbol can be used as a "cursor" symbol
• Can be used with or without animated text cursor.
• Allows to set up text theme.
• Vibration while animating can be used for Android and iOS devices

Usage #

Basic animation. Just add text line(s) and specify text theme:

TypewriteText(
  linesOfText: ['Hello World', 'Hello Flutter', 'Hello Dart'],
  textStyle: TextStyle(color: Colors.red),
  cursorSymbol: '|',
),

One side animation without showing animated text cursor:

TypewriteText(
  linesOfText: ['Hello World', 'Hello Flutter', 'Hello Dart'],
  textStyle: TextStyle(color: Colors.blue, fontSize: 20, fontWeight: FontWeight.bold),
  reverseAnimationDuration: Duration.zero,
  beforeAnimationDuration: Duration.zero,
)

Two side animation with vibration:

TypewriteText(
  linesOfText: ['Hello World', 'Hello Flutter', 'Hello Dart'],
  textStyle: TextStyle(color: Colors.teal, fontSize: 24),
  cursorSymbol: '●',
  tryToVibrate: true, //<- use carefully if vibration is needed.
  forwardAnimationDuration: Duration(milliseconds: 50),
  reverseAnimationDuration: Duration(milliseconds: 50),
  cursorBlinkingDuration: Duration.zero,
)

[]

Documentation #