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.6First, 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. |
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent