CallbackShortcuts in flutter

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:

Wrap your widgets with Focus widget (a widget that defines which widgets can receive keyboard focus) since widget focus affects keyboard events.
Handle Keyboard Events :- Implement a Map with key as type of ShortcutActivator (information about the keys pressed) and value as VoidCallback function which execute when keyboard events triggered. Assign Map to the bindings property of CallbackShortcuts class.
Wrap Relevant Widgets: Wrap the widgets that should respond to the keyboard events with the CallbackShortcuts.

Implementation

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

class KeyboardShortcutExample extends StatefulWidget {
  const KeyboardShortcutExample({super.key});

  @override
  State<KeyboardShortcutExample> createState() =>
      _CallbackShortcutsExampleState();
}

class _CallbackShortcutsExampleState extends State<KeyboardShortcutExample> {
  int count = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text("Callback example"),
        ),
        body: CallbackShortcuts(
          bindings: <ShortcutActivator, VoidCallback>{
            const SingleActivator(LogicalKeyboardKey.arrowUp): () {
              setState((){
                count = count + 1;
              });
            },
            const SingleActivator(LogicalKeyboardKey.arrowDown): () {
              setState((){
                  count = count - 1;
              });
            },
          },
          child: Focus(
            autofocus: true,
            child: Padding(
              padding: const EdgeInsets.all(8.0),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.center,
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  const Text('Press the up arrow key to increase the count and down arrow key to decrease the count',style: TextStyle(fontSize: 18)),
                  SizedBox(height: 8,),
                  Text("$count", style: TextStyle(fontSize: 20),)
                ],
              ),
            ),
          ),
        ));
  }
}

class KeyboardShortcutExample extends StatefulWidget {

const KeyboardShortcutExample({super.key});

@override

State<KeyboardShortcutExample> createState() =>

_CallbackShortcutsExampleState();

}

class _CallbackShortcutsExampleState extends State<KeyboardShortcutExample> {

int count = 0;

@override

Widget build(BuildContext context) {

return Scaffold(

appBar: AppBar(

title: const Text("Callback example"),

body: CallbackShortcuts(

bindings: <ShortcutActivator, VoidCallback>{

const SingleActivator(LogicalKeyboardKey.arrowUp): () {

setState((){

count = count + 1;

});

const SingleActivator(LogicalKeyboardKey.arrowDown): () {

setState((){

count = count - 1;

});

child: Focus(

autofocus: true,

child: Padding(

padding: const EdgeInsets.all(8.0),

child: Column(

crossAxisAlignment: CrossAxisAlignment.center,

mainAxisAlignment: MainAxisAlignment.center,

children: [

const Text('Press the up arrow key to increase the count and down arrow key to decrease the count',style: TextStyle(fontSize: 18)),

SizedBox(height: 8,),

Text("$count", style: TextStyle(fontSize: 20),)

));

}

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

KeyboardShortcutExample

Full code example

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

class KeyboardShortcutExample extends StatefulWidget {
  const KeyboardShortcutExample({super.key});

  @override
  State<KeyboardShortcutExample> createState() =>
      _CallbackShortcutsExampleState();
}

class _CallbackShortcutsExampleState extends State<KeyboardShortcutExample> {
  final ScrollController _controller = ScrollController();
  int quantity = 1;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text("Callback example"),
        ),
        body: SingleChildScrollView(
          controller: _controller,
          child: CallbackShortcuts(
            bindings: <ShortcutActivator, VoidCallback>{
              const SingleActivator(LogicalKeyboardKey.keyA, shift: true): () {
                setState((){
                  quantity = quantity + 1;
                });
              },
              const SingleActivator(LogicalKeyboardKey.keyM, shift: true): () {
                setState((){
                  if(quantity > 0){
                    quantity = quantity - 1;
                  }
                });
              },
              const SingleActivator(LogicalKeyboardKey.arrowUp): () {
                _scrollUp();
              },
              const SingleActivator(LogicalKeyboardKey.arrowDown): () {
                _scrollDown();
              },
            },
            child: Focus(
              autofocus: true,
              child: Padding(
                padding: const EdgeInsets.all(8.0),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    const Text('1. Press the up arrow key to scroll the page up', style: TextStyle(fontSize: 16, fontWeight: FontWeight.w500),),
                    const Padding(
                      padding: EdgeInsets.symmetric(vertical: 4.0),
                      child: Text('2. Press the down arrow key to scroll the page down', style: TextStyle(fontSize: 16, fontWeight: FontWeight.w500)),
                    ),
                    const Text('3. Press the keys Shift+A to increase quantity',style: TextStyle(fontSize: 16, fontWeight: FontWeight.w500)),
                    const Padding(
                      padding: EdgeInsets.only(top: 4, bottom: 10),
                      child: Text('4. Press the keys Shift+M to decrease quantity',style: TextStyle(fontSize: 16, fontWeight: FontWeight.w500)),
                    ),
                    const Divider(),
                    productWidget(quantity),
                    ListView.builder(
                        itemCount: 12,
                        physics: const NeverScrollableScrollPhysics(),
                        shrinkWrap: true,
                        itemBuilder: (context, idx){
                      return productWidget(idx);
                    }),
                  ],
                ),
              ),
            ),
          ),
        ));
  }
  Widget productWidget(int idx){
    return Column(
      children: [
        SizedBox(
          height: 130,
          child: Row(children: [
            Image.network(
                "https://unsplash.com/photos/CrPAvN29Nhs/download?ixid=M3wxMjA3fDB8MXxhbGx8fHx8fHx8fHwxNjkzMjgyOTEwfA&force=true&w=640",
                height: 100,
                width: 100),
            Expanded(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    const Text(
                      'Main product title',
                      style: TextStyle(
                          fontWeight: FontWeight.w600, fontSize: 16),
                    ),
                    const Padding(
                      padding: EdgeInsets.symmetric(vertical: 4),
                      child: Text('This is description of product'),
                    ),
                    const Text('Price : \$150'),
                    Padding(
                      padding: const EdgeInsets.symmetric(vertical: 4.0),
                      child: Text('Total : \$${idx * 150}'),
                    ),
                    Expanded(
                      child: Row(
                        crossAxisAlignment: CrossAxisAlignment.center,
                        children: [
                          const Text("Quantity : "),
                          const Icon(Icons.remove),
                          Container(
                            margin: const EdgeInsets.symmetric(horizontal: 8),
                            padding: const EdgeInsets.symmetric(
                                horizontal: 10, vertical: 4),
                            decoration: BoxDecoration(border: Border.all()),
                            child: Text("$idx"),
                          ),
                          const Icon(Icons.add),
                        ],
                      ),
                    )
                  ],
                )),
          ]),
        ),
        const Divider()
      ],
    );
  }

  void _scrollDown() {
    _controller.animateTo(_controller.position.pixels + 100,
      duration: const Duration(milliseconds: 100),
      curve: Curves.bounceInOut,
    );
  }

  void _scrollUp() {
    _controller.animateTo(_controller.position.pixels -100,
      duration: const Duration(milliseconds: 100),
      curve: Curves.bounceInOut,
    );
  }
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

class KeyboardShortcutExample extends StatefulWidget {

const KeyboardShortcutExample({super.key});

@override

State<KeyboardShortcutExample> createState() =>

_CallbackShortcutsExampleState();

}

class _CallbackShortcutsExampleState extends State<KeyboardShortcutExample> {

final ScrollController _controller = ScrollController();

int quantity = 1;

@override

Widget build(BuildContext context) {

return Scaffold(

appBar: AppBar(

title: const Text("Callback example"),

body: SingleChildScrollView(

controller: _controller,

child: CallbackShortcuts(

bindings: <ShortcutActivator, VoidCallback>{

const SingleActivator(LogicalKeyboardKey.keyA, shift: true): () {

setState((){

quantity = quantity + 1;

});

const SingleActivator(LogicalKeyboardKey.keyM, shift: true): () {

setState((){

if(quantity > 0){

quantity = quantity - 1;

}

});

const SingleActivator(LogicalKeyboardKey.arrowUp): () {

_scrollUp();

const SingleActivator(LogicalKeyboardKey.arrowDown): () {

_scrollDown();

child: Focus(

autofocus: true,

child: Padding(

padding: const EdgeInsets.all(8.0),

child: Column(

crossAxisAlignment: CrossAxisAlignment.start,

children: [

const Text('1. Press the up arrow key to scroll the page up', style: TextStyle(fontSize: 16, fontWeight: FontWeight.w500),),

const Padding(

padding: EdgeInsets.symmetric(vertical: 4.0),

child: Text('2. Press the down arrow key to scroll the page down', style: TextStyle(fontSize: 16, fontWeight: FontWeight.w500)),

const Text('3. Press the keys Shift+A to increase quantity',style: TextStyle(fontSize: 16, fontWeight: FontWeight.w500)),

const Padding(

padding: EdgeInsets.only(top: 4, bottom: 10),

child: Text('4. Press the keys Shift+M to decrease quantity',style: TextStyle(fontSize: 16, fontWeight: FontWeight.w500)),

const Divider(),

productWidget(quantity),

ListView.builder(

itemCount: 12,

physics: const NeverScrollableScrollPhysics(),

shrinkWrap: true,

itemBuilder: (context, idx){

return productWidget(idx);

}),

));

}

Widget productWidget(int idx){

return Column(

children: [

SizedBox(

height: 130,

child: Row(children: [

Image.network(

"https://unsplash.com/photos/CrPAvN29Nhs/download?ixid=M3wxMjA3fDB8MXxhbGx8fHx8fHx8fHwxNjkzMjgyOTEwfA&force=true&w=640",

height: 100,

width: 100),

Expanded(

child: Column(

crossAxisAlignment: CrossAxisAlignment.start,

children: [

const Text(

'Main product title',

style: TextStyle(

fontWeight: FontWeight.w600, fontSize: 16),

const Padding(

padding: EdgeInsets.symmetric(vertical: 4),

child: Text('This is description of product'),

const Text('Price : \$150'),

Padding(

padding: const EdgeInsets.symmetric(vertical: 4.0),

child: Text('Total : \$${idx * 150}'),

Expanded(

child: Row(

crossAxisAlignment: CrossAxisAlignment.center,

children: [

const Text("Quantity : "),

const Icon(Icons.remove),

Container(

margin: const EdgeInsets.symmetric(horizontal: 8),

padding: const EdgeInsets.symmetric(

horizontal: 10, vertical: 4),

decoration: BoxDecoration(border: Border.all()),

child: Text("$idx"),

const Icon(Icons.add),

)

)),

]),

const Divider()

);

}

void _scrollDown() {

_controller.animateTo(_controller.position.pixels + 100,

duration: const Duration(milliseconds: 100),

curve: Curves.bounceInOut,

);

}

void _scrollUp() {

_controller.animateTo(_controller.position.pixels -100,

duration: const Duration(milliseconds: 100),

curve: Curves.bounceInOut,

);

}

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 :

SingleActivator(LogicalKeyboardKey.keyA, shift: true) : binds key combinations Shift+A and callback function to increase the quantity by one.
SingleActivator(LogicalKeyboardKey.keyM, shift: true) : binds key combinations Shift+M, decrement the quantity by one when event triggered.
SingleActivator(LogicalKeyboardKey.arrowUp) : Scroll the page up when arrow up key is pressed from keyboard.
SingleActivator(LogicalKeyboardKey.arrowDown): Scroll the page down when arrow down key is pressed from keyboard.

_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

Handling Keyboard Events

Conclusion

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 ✍️

References

https://api.flutter.dev/flutter/widgets/CallbackShortcuts-class.html#:~:text=A%20widget%20that%20binds%20key,Flutter

Afzal Mehndi

1 Feb, 2024
Updated by - shantanunautiyal.ui798
30 Aug, 2023
Created by - Afzal Mehndi

. . .

What is CallbackShortcuts?

Steps to implement

Implementation

Output of example code

KeyboardShortcutExample

Full code example

Output of full code example

Handling Keyboard Events

Conclusion

References

Leave a Comment Cancel Reply

Message Sent!