Skip to content

A simple typewriter text animation wrapper for flutter.

License

Notifications You must be signed in to change notification settings

cem256/typewritertext

 
 

Repository files navigation

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.3

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++

Property Purpose
text Use widget Text().
duration Used to determine how fast text changes.
alignment Align the text within the occupied size.
maintainSize Used to maintain the occupied size of the final text. Default value is true.
play To set whether the animation should play or not. Default value is true.
repeat To set whether the animation should be repeated or not. Default value is false.
onFinished Is a callback that triggered when the animation is done. This requires [play] as true and repeat as false.

Version 3++

Property Purpose
repeat Specifies whether the animation should repeat once completed (default is false).
enabled Is the flag to play the animation or not.
maintainSize Specifies whether the size of the layout text should be maintained.
duration Delay time between each character.
alignment Alignment of the text layout.
text The text to be displayed during the typewriter animation.
controller Controller for the animation.
onChanged Callback function for when the text is changed.
builder Builder for the widget.
textAlign Alignment of the text.
style Style of the text.
maxLines Maximum number of lines to be displayed.
overflow Overflow behavior of the text.
semanticsLabel Semantics label of the text.
softWrap Specifies whether the text should break at soft line breaks.
strutStyle Strut style of the text.
locale Locale of the text.
textDirection Text direction of the text.
textHeightBehavior Text height behavior of the text.
textWidthBasis Text width basis of the text.
selectionColor Color of the selection.
onFinished Is a callback that triggered when the animation is done. This requires [enabled] as true and repeat as false.

Example

About

A simple typewriter text animation wrapper for flutter.

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • Dart 100.0%