Search packages, repositories and app categories

ducafecatFlutter ecosystem guide
Package detailsv1.1.0

rich_typewriter

A widget that makes underlying Text.rich or RichText animate like a typewriter.

AndroidiOSWebmacOSWindowsLinux
pub.dev API documentation Source code
30-day downloads
38
Likes
37
Pub points
150

Install package

flutter pub add rich_typewriter

Package Overview

Package selection guidance compiled from public package information, community data, and project usage.

A Flutter widget that animates Text.rich or RichText content to simulate a typewriter effect, typing out text character by character with smooth transitions. Ideal for creating engaging onboarding screens, dynamic messages, or interactive storytelling interfaces. The animation is customizable and works across all major platforms including mobile, web, and desktop. It enhances user experience by adding visual rhythm and focus to textual content.

Use cases

  • Onboarding tutorials
  • Interactive storytelling
  • Dynamic message displays
  • Animated welcome screens
  • Engaging UI elements
  • Real-time chat simulations

Key features

  • Character-by-character typing animation
  • Supports rich text formatting
  • Cross-platform compatibility
  • Customizable typing speed
  • Smooth transition effects
  • Easy integration with existing Text.rich

Suitable for

  • UI designers seeking animated text effects
  • Developers building interactive apps
  • Educational or narrative-based applications
  • Apps requiring attention-grabbing text animations

Considerations

  • May impact performance with very long texts
  • Requires careful timing setup for optimal UX
  • Not suitable for static or rapidly changing content
  • Limited control over individual character styling during animation
  • Best used sparingly to avoid user fatigue

Original README

Original README snapshot from the linked source repository. Visit the repository for the latest content.

rich_typewriter

A widget that makes underlying Text.rich or RichText animate like a typewriter.

Preview

Motivation

I was creating a visual novel engine, so I needed a convenient way to animate RichTexts (with styles and WidgetSpans). Actually there are some packages which do the thing, but they do not work with existent RichTexts and/or do not support WidgetSpans.

In addition, it's also a kind of proof of concept in terms of interaction with the element tree.

Features

  • Wrap a Text.rich or a RichText to animate.
  • Supports trees of InlineSpan with arbitrary depth.
  • Can print both text characters and widgets.
  • Allows to set up different delays for different symbols.
  • Allows to call a function when the animation ends.

Usage

RichTypewriter(
        child: const Text.rich(TextSpan(text: "some text", children: [
      WidgetSpan(
          child: FlutterLogo(
        size: 100,
      ))
    ])));

Categories

Text Decoration, Effect & Animation

Source repository

Projects using this package

No data available yet.