How to Implement Keyboard Shortcuts in Flutter with CallbackShortcuts and Back4App

24min
Introduction
Keyboard shortcuts enhance the user experience by providing quick access to common actions within an application. In Flutter, the CallbackShortcuts widget allows developers to map keyboard key combinations directly to callback functions without the need for defining actions or intents. This simplifies the process of adding keyboard shortcuts to your app.
In this tutorial, you will learn how to integrate CallbackShortcuts into a Flutter application and use Back4App—a backend-as-a-service powered by Parse Server—to store and retrieve data. By the end of this tutorial, you will have a Flutter app that responds to keyboard shortcuts to perform actions like fetching data from Back4App.
Prerequisites
To complete this tutorial, you will need:
Flutter SDK installed on your machine. Follow the official Flutter installation guide for your operating system.
Basic knowledge of Flutter and Dart. If you're new to Flutter, review the Flutter documentation to familiarize yourself with the basics.
An IDE or text editor such as Visual Studio Code or Android Studio.
A Back4App account. Sign up for a free account at Back4App.
Parse Server SDK for Flutter added to your project. Learn how to set it up by following the Back4App Flutter SDK Guide.
A physical keyboard or emulator to test keyboard shortcuts.
Step 1 – Setting Up the Flutter Project
1.1. Create a New Flutter Project
Open your terminal and run:
Bash
flutter create callback_shortcuts_app
flutter create callback_shortcuts_app
﻿
Navigate to the project directory:
Bash
cd callback_shortcuts_app
cd callback_shortcuts_app
﻿
1.2. Add Dependencies
Open pubspec.yaml and add the following dependencies:
YAML
dependencies:
  flutter:
    sdk: flutter
  parse_server_sdk_flutter: ^4.0.1
dependencies:
  flutter:
    sdk: flutter
  parse_server_sdk_flutter: ^4.0.1
﻿
Run flutter pub get to install the packages.
Step 2 – Setting Up Back4App
2.1. Create a New Back4App Application
Log in to your Back4App dashboard.
Click on "Create new App".
Enter a name for your application, e.g., "CallbackShortcutsApp", and click "Create".
2.2. Set Up the Data Model
In your application dashboard, navigate to the "Database" section.
Click on "Create a class".
In the modal:
Select "Custom".
Enter "Item" as the class name.
Click "Create class".
2.3. Add Columns to the Class
In the "Item" class, click on "+" to add a new column.
Add the following columns:
name: Type String
description: Type String
Add some sample data to the "Item" class. For example:
2.4. Obtain Application Credentials
Navigate to App Settings > Security & Keys.
Note down your Application ID and Client Key.
Step 3 – Initializing Parse in Your Flutter App
Open lib/main.dart and modify it as follows:
Dart
import 'package:flutter/material.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';
import 'home_page.dart'; // You'll create this file next

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  const keyApplicationId = 'YOUR_APPLICATION_ID';
  const keyClientKey = 'YOUR_CLIENT_KEY';
  const keyParseServerUrl = 'https://parseapi.back4app.com';

  await Parse().initialize(
    keyApplicationId,
    keyParseServerUrl,
    clientKey: keyClientKey,
    debug: true,
  );

  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Callback Shortcuts App',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: HomePage(),
    );
  }
}
import 'package:flutter/material.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';
import 'home_page.dart'; // You'll create this file next

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  const keyApplicationId = 'YOUR_APPLICATION_ID';
  const keyClientKey = 'YOUR_CLIENT_KEY';
  const keyParseServerUrl = 'https://parseapi.back4app.com';

  await Parse().initialize(
    keyApplicationId,
    keyParseServerUrl,
    clientKey: keyClientKey,
    debug: true,
  );

  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Callback Shortcuts App',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: HomePage(),
    );
  }
}
﻿
Replace 'YOUR_APPLICATION_ID' and 'YOUR_CLIENT_KEY' with your actual Back4App credentials.
Step 4 – Fetching Data from Back4App
Create a new file lib/home_page.dart:
Dart
import 'package:flutter/material.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class Item {
  final String name;
  final String description;

  Item(this.name, this.description);
}

class _HomePageState extends State<HomePage> {
  List<Item> items = [];

  Future<void> fetchItems() async {
    final QueryBuilder<ParseObject> query =
        QueryBuilder<ParseObject>(ParseObject('Item'));

    final ParseResponse apiResponse = await query.query();

    if (apiResponse.success && apiResponse.results != null) {
      setState(() {
        items = apiResponse.results!.map((data) {
          final name = data.get<String>('name') ?? '';
          final description = data.get<String>('description') ?? '';
          return Item(name, description);
        }).toList();
      });
    } else {
      print('Error fetching data: ${apiResponse.error?.message}');
    }
  }

  @override
  void initState() {
    super.initState();
    fetchItems();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Callback Shortcuts App'),
      ),
      body: items.isEmpty
          ? Center(child: CircularProgressIndicator())
          : ListView.builder(
              itemCount: items.length,
              itemBuilder: (context, index) {
                return ListTile(
                  title: Text(items[index].name),
                  subtitle: Text(items[index].description),
                );
              },
            ),
    );
  }
}
import 'package:flutter/material.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class Item {
  final String name;
  final String description;

  Item(this.name, this.description);
}

class _HomePageState extends State<HomePage> {
  List<Item> items = [];

  Future<void> fetchItems() async {
    final QueryBuilder<ParseObject> query =
        QueryBuilder<ParseObject>(ParseObject('Item'));

    final ParseResponse apiResponse = await query.query();

    if (apiResponse.success && apiResponse.results != null) {
      setState(() {
        items = apiResponse.results!.map((data) {
          final name = data.get<String>('name') ?? '';
          final description = data.get<String>('description') ?? '';
          return Item(name, description);
        }).toList();
      });
    } else {
      print('Error fetching data: ${apiResponse.error?.message}');
    }
  }

  @override
  void initState() {
    super.initState();
    fetchItems();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Callback Shortcuts App'),
      ),
      body: items.isEmpty
          ? Center(child: CircularProgressIndicator())
          : ListView.builder(
              itemCount: items.length,
              itemBuilder: (context, index) {
                return ListTile(
                  title: Text(items[index].name),
                  subtitle: Text(items[index].description),
                );
              },
            ),
    );
  }
}
﻿
Explanation
Item Class: A model class to represent the items fetched from Back4App.
fetchItems(): Fetches data from the Item class in Back4App and updates the items list.
build(): Displays the list of items or a loading indicator if the data is still being fetched.
Step 5 – Implementing CallbackShortcuts
Now, let's add keyboard shortcuts to refresh the data and navigate through the list.
5.1. Add Focus and CallbackShortcuts Widgets
Modify the build() method in home_page.dart:
Dart
@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text('Callback Shortcuts App'),
    ),
    body: Focus(
      autofocus: true,
      child: CallbackShortcuts(
        bindings: {
          SingleActivator(LogicalKeyboardKey.keyR, control: true): () {
            fetchItems();
            ScaffoldMessenger.of(context).showSnackBar(
              SnackBar(content: Text('Data refreshed')),
            );
          },
          SingleActivator(LogicalKeyboardKey.arrowDown): () {
            _focusNextItem();
          },
          SingleActivator(LogicalKeyboardKey.arrowUp): () {
            _focusPreviousItem();
          },
        },
        child: items.isEmpty
            ? Center(child: CircularProgressIndicator())
            : ListView.builder(
                itemCount: items.length,
                itemBuilder: (context, index) {
                  return FocusableActionDetector(
                    child: ListTile(
                      title: Text(items[index].name),
                      subtitle: Text(items[index].description),
                    ),
                  );
                },
              ),
      ),
    ),
  );
}
@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text('Callback Shortcuts App'),
    ),
    body: Focus(
      autofocus: true,
      child: CallbackShortcuts(
        bindings: {
          SingleActivator(LogicalKeyboardKey.keyR, control: true): () {
            fetchItems();
            ScaffoldMessenger.of(context).showSnackBar(
              SnackBar(content: Text('Data refreshed')),
            );
          },
          SingleActivator(LogicalKeyboardKey.arrowDown): () {
            _focusNextItem();
          },
          SingleActivator(LogicalKeyboardKey.arrowUp): () {
            _focusPreviousItem();
          },
        },
        child: items.isEmpty
            ? Center(child: CircularProgressIndicator())
            : ListView.builder(
                itemCount: items.length,
                itemBuilder: (context, index) {
                  return FocusableActionDetector(
                    child: ListTile(
                      title: Text(items[index].name),
                      subtitle: Text(items[index].description),
                    ),
                  );
                },
              ),
      ),
    ),
  );
}
﻿
Explanation
Focus Widget: Wraps the body to ensure it can receive focus and keyboard events.
CallbackShortcuts: Maps keyboard shortcuts to callback functions.
Ctrl + R: Refreshes the data by calling fetchItems().
Arrow Down: Moves focus to the next item.
Arrow Up: Moves focus to the previous item.
FocusableActionDetector: Makes each ListTile focusable to navigate using keyboard.
5.2. Implement Navigation Functions
Add the following methods to handle item navigation:
Dart
void _focusNextItem() {
  final focus = FocusScope.of(context);
  if (focus.canRequestFocus) {
    focus.nextFocus();
  }
}

void _focusPreviousItem() {
  final focus = FocusScope.of(context);
  if (focus.canRequestFocus) {
    focus.previousFocus();
  }
}
void _focusNextItem() {
  final focus = FocusScope.of(context);
  if (focus.canRequestFocus) {
    focus.nextFocus();
  }
}

void _focusPreviousItem() {
  final focus = FocusScope.of(context);
  if (focus.canRequestFocus) {
    focus.previousFocus();
  }
}
﻿
Step 6 – Testing Keyboard Shortcuts
6.1. Run the App
In your terminal, run:
Bash
flutter run
flutter run
﻿
6.2. Test Refresh Shortcut
Press Ctrl + R (or Cmd + R on macOS) while the app is running.
You should see a snackbar message saying "Data refreshed".
The list should update if there are any changes in the data.
6.3. Test Navigation Shortcuts
Use the Arrow Down and Arrow Up keys to navigate through the list.
You should see the focus move to different items.
Conclusion
In this tutorial, you learned how to implement keyboard shortcuts in a Flutter application using CallbackShortcuts. You integrated Back4App to fetch and display data, and enhanced the user experience by allowing users to interact with the app using keyboard shortcuts.
Key Takeaways
CallbackShortcuts: Simplifies adding keyboard shortcuts by mapping key combinations directly to callback functions.
Focus Management: Essential for widgets to receive keyboard events.
Back4App Integration: Provides a scalable backend to store and retrieve data.
Next Steps
Expand Shortcuts: Add more keyboard shortcuts for additional functionality.
Platform-Specific Modifiers: Handle differences in modifier keys between platforms (e.g., Control vs. Command).
Accessibility: Ensure that your app is accessible by supporting keyboard navigation and screen readers.
Error Handling: Improve error handling when fetching data from Back4App.
Additional Resources
﻿Back4App Documentation﻿
﻿Parse SDK for Flutter Guide﻿
﻿Flutter Official Documentation﻿
﻿CallbackShortcuts Widget﻿
Happy Coding!
Updated 14 Sep 2024
Did this page help you?
How to Create Home Screen Widgets in Flutter with HomeWidget and Back4App
Building a Drag-and-Drop Flutter App with Draggable Widgets and Back4App