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.3First, import the typewriter package.
import 'package:typewritertext/typewritertext.dart';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,
);
}
);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,
);
}
);Full documentation here.
| 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. |
| 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. |