KeyboardTyping Widget
🌱 Getting Started
Add
flutter pub add keyboard_typing
Import
import 'package:keyboard_typing/keyboard_typing.dart';
🌅 Update
- If you define
previewTextColor
paremeter, you can see preview TextWidget's data.
KeyboardTyping(
text: Text("If you define 'previewTextColor' parameter,\nThen you can see a preview TextWidget :)"),
previewTextColor: Colors.grey.withOpacity(0.5),
)
🚀 Usage
- If you don't define a
KeyboardTypingController
, TheKeyboardTyping
Widget plays automatically.
Create KeyboardTyping Widget ⌨
parameter | required | type | default |
---|---|---|---|
text | :heavy_check_mark: | Text | |
controller | :x: | KeyboardTypingController? | |
previewTextColor | :x: | Color? | |
mode | :x: | KeyboardTypingMode | KeyboardTypingMode.normal |
intervalDuration | :x: | Duration? | Duration(milliseconds: 150) |
KeyboardTyping(
text: Text("Something Text"),
)
Play Typing Animation 🚩
// AutoPlay
KeyboardTypingController controller = KeyboardTypingController();
@override
void initState() {
controller
..addStateEventListener(keyboardStateEventListener)
..play();
}
// User control
@override
Widget build(BuildContext context) {
...
ElevatedButton(
onPressed: () {
controller.play();
}
)
}
Stop Typing Animation 🚧
- If you want clear text to define 'true' into cancel parameter in stop function.
KeyboardTypingController controller = KeyboardTypingController();
@override
Widget build(BuildContext context) {
...
ElevatedButton(
onPressed: () {
// Normal stop
controller.stop();
// Forced stop
controller.stop(cancel: true); // Effect clear text and start at first.
}
)
}
Repeat Typing Animation 🌀
KeyboardTyping(
text: Text("Something Text"),
mode: KeyboardTypingMode.repeat,
)
Listen Typing event state 🎈
controller.addStateEventListener((KeyboardTypingState state) {
setState(() {
switch (state) {
case KeyboardTypingState.idle:
// TODO: Handle this case.
case KeyboardTypingState.active:
// TODO: Handle this case.
case KeyboardTypingState.pause:
// TODO: Handle this case.
case KeyboardTypingState.stop:
// TODO: Handle this case.
case KeyboardTypingState.complete:
// TODO: Handle this case.
}
});
},);
// remove
// controller.removeStateEventListener(...);