The easiest way to create a professional keyboard experience in Flutter.

Done · Previous / Next · Custom toolbars · Custom keyboards
Works with ListView, forms, dialogs, bottom sheets, and slivers, without scroll hacks.

Start with the example app. The example/ project is a runnable gallery with every feature. Clone the repo, run cd example && flutter run, and open each demo to see real-world usage before wiring it into your app.

Done only	Navigation

Custom keyboard	Integrated bar

Large ListView	Dialog

Record or refresh clips with ./tool/record_readme_gifs.sh <name> 5 while the matching example demo is open. See doc/gifs/README.md.

dependencies:
  keyboard_actions: ^5.0.0

Keep Flutter's default:

Scaffold(
  // resizeToAvoidBottomInset: true  ← leave the default
  body: KeyboardActions(child: ...),
)

Most keyboard packages wrap your tree in custom padding / SingleChildScrollView. That breaks nested scrollables, slivers, and sheets.

Keyboard Actions 5 does not hijack scrolling.

1. Draws a floating toolbar in an Overlay
2. Reserves the toolbar/footer height at the bottom of its child, so the focused field always has room to clear the bar no matter where you wrap
3. Inflates MediaQuery.viewInsets by the same amount, so a nested Scaffold / Dialog / BottomSheet reacts naturally
4. Scrolls the focused field into view when it would be covered by the keyboard or bar

Scaffold(
  body: KeyboardActions.done(
    child: ListView(
      padding: const EdgeInsets.all(20),
      children: const [
        TextField(decoration: InputDecoration(labelText: 'Email')),
        TextField(decoration: InputDecoration(labelText: 'Password'), obscureText: true),
      ],
    ),
  ),
)

Same widget, wrapped tighter. There is no separate API for a single field:

KeyboardActions.done(
  child: TextField(
    keyboardType: TextInputType.phone,
    decoration: InputDecoration(labelText: 'Phone'),
  ),
)

Wrap the Scaffold body, a ListView, a Form, or one TextField. Put it inside a scrollable or around it. The focused field clears the bar either way, because KeyboardActions reserves the toolbar height at the bottom of its child: inside a scrollable that becomes extra scroll extent, around one it shrinks the viewport by exactly the pixels the bar covers.

So there is nothing to decide, and no extra widget to learn.

KeyboardActions(
  submitText: 'Submit',
  onSubmit: () { /* last field */ },
  child: Form(
    child: ListView(
      children: const [
        TextField(decoration: InputDecoration(labelText: 'Name')),
        TextField(decoration: InputDecoration(labelText: 'Email')),
        TextField(decoration: InputDecoration(labelText: 'Notes'), maxLines: 3),
      ],
    ),
  ),
)

No FocusNodes. No config object. Fields are discovered automatically.

Each one answers a different question, so none of them overlap:

Submit needs onSubmit to appear, and it replaces Done on the last field. Without it you get Done everywhere.

Use inside a [KeyboardActions] ancestor for per-field overrides. That ancestor can wrap just this field: KeyboardActions.done(child: KeyboardField(footer: pad, child: ...)).

Configure a field next to the widget, not in a global list. See example/lib/pages/custom_keyboard_page.dart for a full custom-keyboard setup.

KeyboardField(
  toolbarButtons: [
    (node) => IconButton(
          icon: const Icon(Icons.keyboard_hide),
          onPressed: node.unfocus,
        ),
  ],
  child: const TextField(
    decoration: InputDecoration(labelText: 'Email'),
  ),
)

KeyboardField(
  showBar: false, // panel has its own Done
  footer: NumericKeyboard(
    notifier: amount,
    onDone: () => focus.unfocus(),
  ),
  child: KeyboardCustomInput<String>(
    focusNode: focus,
    notifier: amount,
    builder: (context, value, hasFocus) => Text(value),
  ),
)

Per-field options: showBar, showArrows, showDone, toolbarButtons, footer / footerBuilder, onDone, optional focusNode.

All appearance lives in one object, so you style the bar once for the whole app instead of repeating parameters. See example/lib/pages/theming_page.dart, which switches presets live.

Wrap your app to style every bar in it:

KeyboardActionsTheme(
  data: KeyboardActionsThemeData(
    barColor: const Color(0xFF1B4D3E),
    foregroundColor: Colors.white,
    doneText: 'Listo',
    doneTextStyle: const TextStyle(fontWeight: FontWeight.w800, fontSize: 17),
  ),
  child: MaterialApp(...),
)

It is also a ThemeExtension, so you can keep it inside your ThemeData and get light/dark handling for free:

MaterialApp(
  theme: ThemeData(
    extensions: const [
      KeyboardActionsThemeData(barColor: Color(0xFFEEEEEE)),
    ],
  ),
)

Or override a single instance:

KeyboardActions(
  theme: const KeyboardActionsThemeData(barHeight: 62),
  child: ...,
)

Resolution order: KeyboardActions.theme → KeyboardActionsTheme → ThemeData.extensions → Material / platform defaults. Unset values fall through, so a per-screen override only replaces what it sets.

Text styles are merged over the defaults, so doneTextStyle: TextStyle(fontSize: 20) changes the size and keeps the resolved color.

On iOS 26+ the bar floats above the system keyboard with a small gap and rounded corners, matching the new keyboard shape. On older iOS and Android it sits flush by default.

Set integratedBar: true for a classic accessory toolbar that is always flush with the keyboard, with no gap and no rounded corners. See example/lib/pages/integrated_bar_page.dart.

KeyboardActions(
  theme: const KeyboardActionsThemeData(integratedBar: true),
  child: ...,
)

That is the whole public API, and the first three cover almost everything.

Behavior lives on the widget; appearance lives in the theme.

KeyboardActions(
  navigation: KeyboardNavigation.auto,
  ensureVisible: true,
  dismissOnTapOutside: true,
  submitText: 'Submit',
  onSubmit: () {},
  theme: KeyboardActionsThemeData(
    barColor: Colors.grey.shade200,
    doneTextStyle: const TextStyle(color: Colors.green),
  ),
  child: ...,
)

The best way to learn the package is to run the example project and tap through every screen:

git clone https://github.com/diegoveloper/flutter_keyboard_actions.git
cd flutter_keyboard_actions/example
flutter run

Each demo lives under example/lib/pages/:

Demo	What it shows	Preview
Done only	Zero config login-style form
Form + navigation	Prev / Next / Done / Submit
Theming	Colors, height, labels and icons via theme
Integrated bar	integratedBar: true, flush toolbar
Material 2	Classic M2 theme + integrated bar
Large ListView	40+ fields, no scroll wrapper hacks
Custom keyboards	Counter, color picker, numeric panels
Dialog	Works inside AlertDialog
Bottom sheet	Checkout-style modal sheet
Nested scroll	CustomScrollView + slivers

Custom keyboard widgets are in example/lib/widgets/custom_keyboards.dart.

MIT