Search packages, repositories and app categories

GitHub repositorymcrovero/flutter_interactive_keyboard

flutter_interactive_keyboard

More on https://medium.com/@mattia_crovero/interactive-keyboard-in-flutter-5d7ac6ee096b

flutter_interactive_keyboard project cover
Stars
54
Forks
28
Last push (UTC)
Apr 12, 2021
Project status
Active

Original README

English project snapshot. Visit GitHub for the latest content.

pub package

This plugin is not under active development. If you'd like to contribute, PRs are welcomed.

Flutter Interactive Keyboard

A way to mimic the iOS interactive dismissable keyboard in Flutter. For Android, the behavior will still be applied without animation due to the Android keyboard limitations.

How to use it

The KeyboardManagerWidget defines the area where the draggable keyboard is enabled. Gestures are passed to the widget in order to permit both scrolling and drag-to-dismiss behavior.

focusNode is required when using a TextField to manage the keyboard opening and closing.

See the full example to see a complete implementation.

KeyboardManagerWidget(
  focusNode: _focusNode,
  child: ListView.builder(
    itemCount: 100,
    itemBuilder: (context,index){
      return ListTile(
        title: Text("element $index"),
      );
    },
  ),
)

Advanced

Change focusNode

If your app has more than one TextField that should trigger the keyboard, you can change the current FocusNode from the KeyboardManagerWidgetState as follows:

// Init variable
GlobalKey<KeyboardManagerWidgetState> _key = GlobalKey();

// In the build method
KeyboardManagerWidget(
  key: _key,
  ...
)

// Wherever you like
_key.currentState.substituteFocusNode = newFocusNode;
Mattia Crovero GitHub avatar
GitHub author

Mattia Crovero ↗

Full stack developer @ Ujiboo Srl

Ujiboo SrlItaly, TurinOfficial website ↗
LanguagesDartSwiftRubyKotlinObjective-C

Packages published by this repository

Dependencies used

Dependency list 2 items

  • flutter{"sdk":"flutter"}
  • flutter_testDevelopment{"sdk":"flutter"}

How do I choose a repository?

Start with your use case, compare repository activity, and check the original project before adopting it.

  1. Search by repository name, owner or description, then narrow the results by topic.
  2. Compare stars, forks and recent pushes. Stars show community interest, not a guarantee of quality.
  3. Read the README, license and issues on GitHub before using a project.

Sources and maintenance

“A repository is the most basic element of GitHub.”

GitHub Docs — About repositories ↗