TypeWriter Text

0

A simple typewriter text animation wrapper for flutter.

Miscellaneous

dart
flutter
flutter-package
pub-dev

TypeWeriter Text Dall-E Logo

Type Writer Text



A simple typewriter text animation wrapper for flutter, supports iOS, Android, web, Windows, macOS, and Linux.

Preview

screen-capture-1

Install

Add this line to your pubspec.yaml.

dependencies:
  typewritertext: ^3.0.2

Usage

First, import the typewriter package.

import 'package:typewritertext/typewritertext.dart';

Version 1++

And to make basic TypeWriterText just make it like this

const TypeWriterText(
  text: Text('lorem ipsum dolor sit amet ...'),
  duration: Duration(milliseconds: 50),
);

Or if you want something that more customizable, use this

const TypeWriterText.builder(
  'Lorem ipsum dolor sit amet ...',
  duration: Duration(milliseconds: 50),
  builder: (context, value) {
    return AutoSizeText(
      value,
      maxLines: 2,
      minFontSize: 2.0,
    );
  }
);

Version 3++

Now there is new version of TypeWriterText, where the text value that being used is not a Text widget but Iterable<String>. Here's the basic example of it.

TypeWriter.text(
  'lorem ipsum dolot sit amet ...',
  duration: const Duration(milliseconds: 50),
);

And for the builder, you need to initiate a controller like this one.

final controller = TypeWriterController(text: 'Hello World',
  duration: const Duration(milliseconds: 50),
);

// also if you want the typewriter to not only changing
// the character but also words, you can use this controller.

final valueController = TypeWriterController.fromValue(
  TypeWriterValue([
    'First Paragraph', 
    'Next Paragraph', 
    'Last Paragraph',
  ]),
  duration: const Duration(milliseconds: 50),
);

TypeWriter(
  controller: controller,
  builder: (context, value) {
    return AutoSizeText(
      value.text,
      maxLines: 2,
      minFontSize: 2.0,
    ); 
  }
);

Documentation

Full documentation here.

Version 1++

PropertyPurpose
textUse widget Text().
durationUsed to determine how fast text changes.
alignmentAlign the text within the occupied size.
maintainSizeUsed to maintain the occupied size of the final text. Default value is true.
playTo set whether the animation should play or not. Default value is true.
repeatTo set whether the animation should be repeated or not. Default value is false.

Version 3++

PropertyPurpose
repeatSpecifies whether the animation should repeat once completed (default is false).
enabledIs the flag to play the animation or not.
maintainSizeSpecifies whether the size of the layout text should be maintained.
durationDelay time between each character.
alignmentAlignment of the text layout.
textThe text to be displayed during the typewriter animation.
controllerController for the animation.
onChangedCallback function for when the text is changed.
builderBuilder for the widget.
textAlignAlignment of the text.
styleStyle of the text.
maxLinesMaximum number of lines to be displayed.
overflowOverflow behavior of the text.
semanticsLabelSemantics label of the text.
softWrapSpecifies whether the text should break at soft line breaks.
strutStyleStrut style of the text.
localeLocale of the text.
textDirectionText direction of the text.
textHeightBehaviorText height behavior of the text.
textWidthBasisText width basis of the text.
selectionColorColor of the selection.

Example