A simple typewriter text animation wrapper for flutter, supports iOS, Android, web, Windows, macOS, and Linux.
Add this line to your pubspec.yaml.
dependencies:
typewritertext: ^3.0.6
First, import the typewriter package.
import 'package:typewritertext/typewritertext.dart';
And use it like this
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 Text(
value.text,
maxLines: 2,
minFontSize: 2.0,
);
}
);
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. |
onChanged | Callback function for when the text is changed. |
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 . |
Property | Purpose |
---|---|
controller | Controller that manage the animation. You can use TypeWriterController or TypeWriterController.fromValue . |
enabled | Is the flag to play the animation or not. |
builder | Builder that contains TypeWriterValue in sequence. |
onFinished | Is a callback that triggered when the animation is done. This requires [enabled] as true and repeat as false . |