CallbackShortcuts in flutter

Updated 1 February 2024


User interfaces must have keyboard shortcuts because they allow users to do tasks fast without only using mouse interactions. The CallbackShortcuts widget in Flutter lets you build keyboard shortcuts despite the framework’s lack of built-in handling of keyboard shortcuts like desktop programmes. We’ll look at how to use CallbackShortcuts tutorial to record and manage keyboard events.

What is CallbackShortcuts?

A Flutter widget called CallbackShortcuts enables you to binds key combinations to specific callbacks. You can create your own keyboard shortcuts and keyboard interactions since you have direct access to the keyboard input.

Read more about Flutter app development services from mobikul.

Steps to implement

The basic steps of using CallbackShortcuts widget involves the following steps:


Create a stateful class KeyboardShortcutExample and create simple counter app to increment and decrement the count value by one as shown below.

In above example code When the arrow up key is hit on the keyboard, the callback method executes and increments the count value by one, while the setState function updates the UI.

LogicalKeyboardKey.arrowUp :- binds the arrow key up with increment count by 1.

LogicalKeyboardKey.arrowDown :- binds the arrow key down with decrement count by 1.

SingleActivator :- Represents a single key combined with modifiers (control, shift, alt).

CallbackShortcuts :- Accept child widget that respond to the keyboard event.

bindings :- Property of CallbackShortcuts that accept Map of Keyboard events and callback function.

Focus :- Allow this widget and its descendants to receive keyboard focus.

Want to learn about Keyboard Focus in flutter.

Output of example code

Full code example

Below is the full code example for handling keyboard events :-

Above code we have added scrolling feature also using the arrow keys up to scroll the page up and arrow key down to scroll the page down.

we have added productWidget inside  ListView.builder class to generate content on the UI for scrolling and handling keyboard events.

You can also learn about callback in swift.

In bindings property we have defined four entries in map to handle four keyboard events as :

_controller :- Control the scrolling effect in the UI or to add animation while scrolling.

Triggering event on click of button in android.

Output of full code example


Thanks for reading this article ❤️

I hope this blog will help you to learn about how to Use CallbackShortcuts widget in flutter and you will be able to implement it. For more updates, make sure to keep following Mobikul Blogs to learn more about flutter and android.

Happy Learning ✍️


. . .

Leave a Comment

Your email address will not be published. Required fields are marked*

Be the first to comment.

Start a Project

    Message Sent!

    If you have more details or questions, you can reply to the received confirmation email.

    Back to Home