TypeThis #

A flutter package that aims to simplify versatile typing animation with reset, freeze and unfreeze functionality.

Create a TypeThis widget #

final typeThisWidget = TypeThis(
  // The text which will be animated.
  string: 'Hi there! How are you doing?',
  // Speed in milliseconds at which the typing animation will be executed.
  speed: 100,
  // Text style for the string.
  style: const TextStyle(fontSize: 20),
);

Reset the animation #

// Call the `reset()` method on controller to reset the typing animation.
typeThisWidget.controller.reset();

Freeze (pause) the animation #

// Call the `freeze()` method on controller to freeze/pause the typing animation.
typeThisWidget.controller.freeze();

Unfreeze (resume) the animation #

// Call the `unfreeze()` method on controller to unfreeze/resume the typing animation.
typeThisWidget.controller.unfreeze();

RichText effects #

Add rich text effects within typing animation using TypeThisMatcher that works with regex pattern.

final richTypeThisWidget = TypeThis(
  string: 'Welcome to the typethis package.',
  speed: 100,
  style: const TextStyle(fontSize: 18),
  softWrap: true,
  richTextMatchers: const [
    TypeThisMatcher(
      'typethis',
      style: TextStyle(
        fontWeight: FontWeight.bold,
        fontStyle: FontStyle.italic,
        decoration: TextDecoration.underline,
        decorationColor: Colors.indigo,
        color: Colors.indigo,
      ),
    ),
  ],
);

// Reset, freeze and unfreeze animation similarly
richTypeThisWidget.controller.reset();
richTypeThisWidget.controller.freeze();
richTypeThisWidget.controller.unfreeze();

Demo #

[Demo]

License #

The project is released under the MIT License. Learn more about it, here.

Developed and Maintained with 💜 by thecodexhub