A simple typewriter text animation wrapper for flutter, supports iOS, Android, web, Windows, macOS, and Linux.
![TypeWriterText Preview](https://private-user-images.githubusercontent.com/45191605/348461897-451d0265-dd2d-4134-807d-a02e1f17b8bb.gif?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3Mzg5ODA4NTYsIm5iZiI6MTczODk4MDU1NiwicGF0aCI6Ii80NTE5MTYwNS8zNDg0NjE4OTctNDUxZDAyNjUtZGQyZC00MTM0LTgwN2QtYTAyZTFmMTdiOGJiLmdpZj9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNTAyMDglMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjUwMjA4VDAyMDkxNlomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPThjZjJiZjk5ZjI2MTgzYzEyN2I0YzE4MWYzYmFhZWM4ZDVjMTUzZmE1NTFjNTg2MGViZTBlZGU4NzM3MDEyNzQmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0In0.a1V3pXfziEGPs-dQEHice7k_h60lXMctysC3DE4LIkI)
Add this line to your pubspec.yaml.
dependencies:
typewritertext: ^3.0.9
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),
);
// you can also integrate the controller with Stream<String> like this one.
final streamController = TypeWriterController.fromStream(
StreamController<String>().stream
);
TypeWriter(
controller: controller, // valueController // streamController
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 . |