use_scramble

Package Overview

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

A lightweight Flutter package that enables random text animations, inspired by the useScramble hook. It creates dynamic, typewriter-like effects where text appears to scramble and settle into its final form. Ideal for engaging UI elements such as loading messages, animated headlines, or interactive text displays. The package is simple to integrate and works across all major platforms, including mobile, web, and desktop. It supports customizable scrambling speed and character sets, making it flexible for various design needs.

Use cases

Animated welcome messages
Loading state indicators
Interactive headline effects
Dynamic label animations
Engaging onboarding screens

Key features

Real-time text scrambling
Customizable animation speed
Supports custom character sets
Cross-platform compatibility
Minimal setup required
Smooth performance across devices

Suitable for

UI designers seeking dynamic text effects
Developers building interactive apps
Projects with animated onboarding flows
Apps requiring visual feedback during loading
Creative digital experiences

Considerations

May impact performance with very long texts
Limited control over individual character timing
Not ideal for static text display
Best suited for short, impactful phrases
Requires careful tuning for optimal visual effect

Original README

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

Lightweight package for random text animations inspired by useScramble

Used by

Board Buddy
- AppStore
- Google Play

Usage

TextScramble(
    text: 'Hello World!',
    speed: Duration(milliseconds: 50),
    chars: '!<>-_\\/[]{}—=+*^?#________',
    correctCharProbability: 0.1, // Correct character probability in [0, 1]
    scrambleCycles: 4, // Number of times to scramble the text
    builder: (context, scrambledText) {
      // Use the builder to define how the text is displayed
      return Text(
        scrambledText,
        textAlign: TextAlign.center, // Text alignment is now within the builder
        style: TextStyle( // Text style is now within the builder
          fontSize: 40,
          color: Colors.green,
          fontFamily: 'JetBrainsMono',
        ),
      );
    },
),

Bugs/Requests

If you encounter any problems feel free to open an issue. If you feel the library is missing a feature, please raise a ticket on Github and I'll look into it. Pull request are also welcome.

Additional information

Medium article link

Created by Gleb | khlebobul@gmail.com

Support the project:

Credits

Inspired by useScramble
Thanks eibaan for the recommendations

Search packages, repositories and app categories

Install package