Shortcuts Widget and Attributes

Shortcuts Widget and Attributes

ยท

2 min read

In the world of Flutter, enhancing user interaction is paramount, and the Shortcuts widget stands out as a powerful tool for achieving just that. This blog post will shed light on the Shortcuts widget, explore its attributes, and provide a hands-on example to illustrate its functionality.

The Shortcuts widget allows Flutter developers to implement keyboard shortcuts seamlessly in their applications. It opens up the possibility of users performing actions swiftly using keyboard combinations, enhancing the overall usability and accessibility of the app.

Attributes of Shortcuts Widget:

  1. shortcuts: This attribute takes a map of LogicalKeySet to Intent. Each LogicalKeySet represents a combination of keys, and the associated Intent defines the action to be triggered when that combination is pressed.

  2. child: The widget subtree where the shortcuts are applicable. Shortcuts defined within the Shortcuts widget will be active only within the context of this subtree.

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Shortcuts Widget Example'),
        ),
        body: Center(
          child: Shortcuts(
            shortcuts: {
              LogicalKeySet(LogicalKeyboardKey.control, LogicalKeyboardKey.keyS): CustomIntent(),
            },
            child: MyWidget(),
          ),
        ),
      ),
    );
  }
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: () {
        // Simulate the shortcut action when the button is pressed
        Shortcuts.of(context)!.handleShortcuts(CustomIntent());
      },
      child: Text('Press Ctrl + S'),
    );
  }
}

class CustomIntent extends Intent {
  const CustomIntent();
}

class CustomAction extends IntentAction {
  @override
  Future<void> invoke(covariant Intent intent) async {
    // Define the behavior of the custom action
    print('Custom Intent Action Invoked!');
  }
}

void main() {
  runApp(MyApp());
}

In this example:

  • We create a Flutter app with an AppBar and a Center widget hosting a custom MyWidget.

  • Inside MyWidget, we use the Shortcuts widget to define a keyboard shortcut (Ctrl + S) associated with a custom action named 'CustomIntent.'

  • The ElevatedButton labeled "Press Ctrl + S" triggers the simulation of the shortcut action when pressed.

  • The custom action (CustomIntent) is handled by the handleShortcuts method.

Remember to run this code in an environment where keyboard events can be captured, such as on a desktop or with an emulator that supports keyboard input. Pressing "Ctrl + S" (or equivalent for your platform) when the button is focused should trigger the custom action and print "Custom Intent Action Invoked!" to the console.

Did you find this article valuable?

Support Vinit Mepani (Flutter Developer) by becoming a sponsor. Any amount is appreciated!

ย