KeyboardTyping Widget

🌱 Getting Started

Add

flutter pub add keyboard_typing

Import

import 'package:keyboard_typing/keyboard_typing.dart';

🌅 Update

• 0.0.7 version
• If you define cursorStyle parameter, you can see cursor(caret) beside TextWidget.

CursorStyle 📍

parameter	required	type	default
mode	:heavy_check_mark:	KeyboardTypingCursorMode	none
color	:x:	Color?
width	:x:	double	1.0

KeyboardTyping(
  text: Text("KeyboardTyping Test Sentence"),
  controller: controller,
  cursorStyle: CursorStyle(
    mode: KeyboardTypingCursorMode.vertical
  )
)

🚀 Usage

• If you don't define a KeyboardTypingController, The KeyboardTyping 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)
cursorStyle	:x:	CursorStyle?	CursorStyle(mode: KeyboardTypingCursorMode.none)

  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(...);

Preview Text 👥

• 0.0.6 version
• 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),
  )