A Guide to Using the Shortcuts Widget in Flutter For Creating Easy Keyboard Shortcuts

Boosting your app's efficiency and user experience can be achieved through various means, and keyboard shortcuts are a powerful tool in your arsenal. Flutter, a popular framework for building mobile and web apps, provides the “Shortcuts” widget to easily implement keyboard shortcuts in your applications. This widget allows you to define specific key combinations that trigger designated actions within your app, improving the user's interaction experience.

The blog will guide you through everything you need to know about using the Shortcuts widget.

Understanding the Shortcuts Widget

The Shortcuts widget acts as a bridge between keyboard input and specific actions within your app. It primarily consists of two key components:

• child: This mandatory parameter represents the widget that receives keyboard focus. When the user presses a key combination, the focus remains on this child widget, ensuring the shortcut triggers the intended action within its context.

• shortcuts: This parameter defines a map that associates keyboard combinations (ShortcutActivator) with corresponding actions (Callback).

  a. ShortcutActivator: This defines the specific key combination that triggers the action. It can represent single keys with modifiers (e.g., Ctrl + Q), single keys alone (e.g., Escape), or even character-based shortcuts.

  b. Callback: This is a function that gets executed when the user presses the associated ShortcutActivator combination. This function defines the specific action you want to perform within your app when the shortcut is triggered.

The concept of Actions comes into play through the Callback function. Essentially, the Callback defines the specific behavior or functionality you want to trigger when a particular keyboard shortcut is pressed. This allows you to link various actions within your app to specific key combinations, creating a customized and efficient user experience.

Creating Keyboard Shortcuts with Shortcuts Widget

The Shortcuts widget allows you to define custom keyboard shortcuts using various options for key combinations and corresponding actions. Here's how to achieve this:

1. Using LogicalKeySet for Basic Key Combinations:

The LogicalKeySet class helps define combinations of logical keys, offering a platform-agnostic way to specify shortcuts. Here's an example:

1Shortcuts(
2  child: MyWidget(), // The widget receiving focus
3  shortcuts: {
4    LogicalKeySet(LogicalKeyboardKey.ctrl, LogicalKeyboardKey.keyQ): () {
5      // Action to be executed when Ctrl + Q is pressed
6    },
7  },
8)

In this example, pressing Ctrl + Q triggers the Callback function, which defines the desired action within your app.

2. Using Other ShortcutActivator Types:

While LogicalKeySet caters to basic combinations, Flutter offers other ShortcutActivator types for specific scenarios:

• SingleActivator: This is used for single keys, potentially with modifiers like Ctrl or Shift.

For instance:

1Shortcuts(
2  child: MyTextField(),
3  shortcuts: {
4    SingleActivator(LogicalKeyboardKey.keyC, ctrl: true): () {
5      // Action for copying text (Ctrl + C)
6    },
7  },
8)

Here, pressing Ctrl + C triggers the action for copying text.

• CharacterActivator: This defines shortcuts based on specific characters typed. Example:

1Shortcuts(
2  child: MySearchField(),
3  shortcuts: {
4    CharacterActivator('f'): () {
5      // Action for focusing search field (typing 'f')
6    },
7  },
8)

In this case, typing the single character f focuses the search field.

3. Implementing the Callback Function:

The Callback function is the heart of the action. It defines what happens when a specific key combination is pressed. This function can contain any logic you desire, such as:

• Updating the UI state of your app.
• Calling other functions to perform specific actions.
• Triggering navigation events within your app.

Make sure the Callback function doesn't return any value, as its primary purpose is to execute the desired action upon shortcut activation.

Implementing Keyboard Shortcuts:

Define Actions:

Here, SelectAllAction is a custom class to identify the action, and selectAll is the function to be called when the shortcut is triggered.

1Actions actions = Actions(
2  children: [
3    TypedAction(
4      type: const TypeToken<SelectAllAction>(),
5      onInvoke: (context) => selectAll(context),
6    ),
7  ],
8);
9

Create Shortcuts:

This defines a shortcut where Ctrl + A triggers the SelectAllAction.

1Shortcuts(
2  shortcuts: {
3    LogicalKeySet(LogicalKeyboardKey.control, LogicalKeyboardKey.a):
4        const TypeToken<SelectAllAction>(),
5  },
6  child: MyWidget(), // The widget the shortcuts apply to
7);

Additional Considerations:

• Customization: You can customize the appearance of the shortcut description using the ShortcutLabel widget.
• Multiple Actions & Fallbacks: The Shortcuts widget can handle multiple Shortcut definitions, allowing different shortcuts to trigger the same action. Additionally, you can define a fallback action using the fallback property for situations where no matching Shortcut is found.
• Context & Focus: The Shortcuts widget uses the context and focus information to determine the appropriate action to invoke. This ensures shortcuts only work in relevant parts of your app.

Putting It All Together:

By combining Actions and Shortcuts, you can create intuitive keyboard shortcuts for various functionalities. Remember to consider your target platform's typical keyboard layouts and conventions when designing shortcuts.

Code Example

1import 'package:flutter/material.dart';
2import 'package:flutter/services.dart';
3
4class MyApp extends StatelessWidget {
5  // ... other parts of your app
6
7  @override
8  Widget build(BuildContext context) {
9    return Actions(
10      actions: {
11        CopyAction: CallbackAction<CopyAction>(
12          onInvoke: (intent) => Clipboard.setData(ClipboardData(text: 'Some text to copy')),
13        ),
14      },
15      child: Shortcuts(
16        shortcuts: {
17          LogicalKeySet(LogicalKeyboardKey.control, LogicalKeyboardKey.c): const CopyAction(),
18        },
19        child: MaterialApp(
20          // ... your Material app structure
21          home: Scaffold(
22            body: TextField(
23              // ... your text field
24            ),
25          ),
26        )
27      ),
28    );
29  }
30}
31
32// Custom Action class 
33class CopyAction extends Intent {
34  const CopyAction();
35}

Explanation

a. Import Necessary Packages:

• flutter/material.dart: Provides core Flutter widgets and framework.
• flutter/services.dart: Gives access to system-level services like the clipboard.

b. Define a Custom Action:

• CopyAction: Represents the intent to copy text. For simplicity, we only need to create a class that extends Intent.

c. Utilize CallbackAction:

• CallbackAction: A convenient way to define an action with a simple callback function.
• onInvoke: The callback executed when the shortcut is triggered. Here, it copies "Some text to copy" to the clipboard.

d. Wrap with Shortcuts Widget:

• Shortcuts: Defines the keyboard shortcuts and their associated actions.
• shortcuts: A map where keys are LogicalKeySets (combinations of keys) and values are Intent instances. Here, Ctrl+C is mapped to our CopyAction.

e. Connect to a Widget: The child of the Shortcuts widget is the part of your app where the shortcuts are active. We are applying it to a TextField within a MaterialApp so that the copy shortcut will work when the TextField has focus.

How does it work?

• When the user presses Ctrl + C while the TextField has focus, the Shortcuts widget detects the key combination.
• It finds a matching shortcut in the shortcuts map linking Ctrl + C to the CopyAction.
• The Actions widget recognizes the CopyAction and executes its associated callback function via the onInvoke handler.
• The provided text is copied to the clipboard.

Important Things to Consider

• Ensure that the widget where you want the shortcuts to be active is a descendant of both the Shortcuts and Actions widgets.
• You can define multiple shortcuts and actions within the Shortcuts and Action widgets.

Benefits of Using Keyboard Shortcuts:

• Increased Efficiency: Users can perform tasks faster and more efficiently with keyboard shortcuts compared to using menus or touch interactions.
• Improved Accessibility: Keyboard shortcuts can be especially valuable for users with accessibility needs who might rely on keyboard navigation.
• Enhanced User Experience: Providing shortcuts demonstrates attention to detail and creates a more polished and user-friendly app.

Conclusion:

The Shortcuts widget in Flutter empowers you to implement powerful and user-friendly keyboard shortcuts, enhancing your app's usability and user experience. By following the steps outlined above and considering the additional tips, you can effectively leverage this feature to create a more efficient and accessible app for your users.

Short on time? Speed things up with DhiWise!!

Tired of manually designing screens, coding on weekends, and technical debt? Let DhiWise handle it for you!

You can build an e-commerce store, healthcare app, portfolio, blogging website, social media or admin panel right away. Use our library of 40+ pre-built free templates to create your first application using DhiWise.