Más
Cómo implementar atajos de teclado en Flutter con CallbackShortcuts y Back4App

24min
Introducción
Los atajos de teclado mejoran la experiencia del usuario al proporcionar acceso rápido a acciones comunes dentro de una aplicación. En Flutter, el CallbackShortcuts widget permite a los desarrolladores mapear combinaciones de teclas del teclado directamente a funciones de callback sin necesidad de definir acciones o intenciones. Esto simplifica el proceso de agregar atajos de teclado a tu aplicación.
En este tutorial, aprenderás cómo integrar CallbackShortcuts en una aplicación Flutter y usar Back4App—un backend como servicio impulsado por Parse Server—para almacenar y recuperar datos. Al final de este tutorial, tendrás una aplicación Flutter que responde a atajos de teclado para realizar acciones como obtener datos de Back4App.
Requisitos previos
Para completar este tutorial, necesitarás:
Flutter SDK instalado en tu máquina. Sigue la guía de instalación oficial de Flutter para tu sistema operativo.
Conocimientos básicos de Flutter y Dart. Si eres nuevo en Flutter, revisa la documentación de Flutter para familiarizarte con los conceptos básicos.
Un IDE o editor de texto como Visual Studio Code o Android Studio.
Una cuenta de Back4App. Regístrate para obtener una cuenta gratuita en Back4App.
Parse Server SDK para Flutter agregado a tu proyecto. Aprende cómo configurarlo siguiendo la Guía de SDK de Flutter de Back4App.
Un teclado físico o emulador para probar los atajos de teclado.
Paso 1 – Configurando el Proyecto Flutter
1.1. Crear un Nuevo Proyecto Flutter
Abre tu terminal y ejecuta:
Bash
flutter create callback_shortcuts_app
flutter create callback_shortcuts_app
﻿
Navega al directorio del proyecto:
Bash
cd callback_shortcuts_app
cd callback_shortcuts_app
﻿
1.2. Agregar Dependencias
Abre pubspec.yaml y agrega las siguientes dependencias:
YAML
dependencies:
  flutter:
    sdk: flutter
  parse_server_sdk_flutter: ^4.0.1
dependencies:
  flutter:
    sdk: flutter
  parse_server_sdk_flutter: ^4.0.1
﻿
Ejecuta flutter pub get para instalar los paquetes.
Paso 2 – Configuración de Back4App
2.1. Crear una Nueva Aplicación en Back4App
Inicia sesión en tu panel de control de Back4App.
Haz clic en "Crear nueva App".
Ingresa un nombre para tu aplicación, por ejemplo, "CallbackShortcutsApp", y haz clic en "Crear".
2.2. Configurar el Modelo de Datos
En el panel de control de tu aplicación, navega a la "Base de datos" sección.
Haz clic en "Crear una clase".
En el modal:
Selecciona "Personalizado".
Ingresa "Elemento" como el nombre de la clase.
Haz clic en "Crear clase".
2.3. Agregar columnas a la clase
En la "Elemento" clase, haz clic en "+" para agregar una nueva columna.
Agrega las siguientes columnas:
nombre: Escribe Cadena
descripción: Escribe Cadena
Agrega algunos datos de ejemplo a la "Elemento" clase. Por ejemplo:
2.4. Obtener credenciales de la aplicación
Navegar a Configuraciones de la Aplicación > Seguridad y Claves.
Anote su ID de Aplicación y Clave de Cliente.
Paso 3 – Inicializando Parse en Su Aplicación Flutter
Abra lib/main.dart y modifíquelo de la siguiente manera:
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(),
    );
  }
}
﻿
Reemplace 'YOUR_APPLICATION_ID' y 'YOUR_CLIENT_KEY' con sus credenciales reales de Back4App.
Paso 4 – Recuperando Datos de Back4App
Cree un nuevo archivo 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),
                );
              },
            ),
    );
  }
}
﻿
Explicación
Clase Item: Una clase modelo para representar los elementos recuperados de Back4App.
fetchItems(): Recupera datos de la clase Item en Back4App y actualiza la lista de items.
build(): Muestra la lista de elementos o un indicador de carga si los datos aún se están recuperando.
Paso 5 – Implementando CallbackShortcuts
Ahora, agreguemos atajos de teclado para actualizar los datos y navegar a través de la lista.
5.1. Agregar Widgets de Enfoque y CallbackShortcuts
Modifica el build() método en 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),
                    ),
                  );
                },
              ),
      ),
    ),
  );
}
﻿
Explicación
Focus Widget: Envuelve el cuerpo para asegurarse de que puede recibir eventos de enfoque y teclado.
CallbackShortcuts: Mapea atajos de teclado a funciones de callback.
Ctrl + R: Refresca los datos llamando a fetchItems().
Flecha Abajo: Mueve el enfoque al siguiente elemento.
Flecha Arriba: Mueve el enfoque al elemento anterior.
FocusableActionDetector: Hace que cada ListTile sea enfocable para navegar usando el teclado.
5.2. Implementar Funciones de Navegación
Agrega los siguientes métodos para manejar la navegación de elementos:
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();
  }
}
﻿
Paso 6 – Pruebas de Atajos de Teclado
6.1. Ejecutar la Aplicación
En tu terminal, ejecuta:
Bash
flutter run
flutter run
﻿
6.2. Probar el acceso directo de actualización
Presiona Ctrl + R (o Cmd + R en macOS) mientras la aplicación está en ejecución.
Deberías ver un mensaje de snackbar que dice "Datos actualizados".
La lista debería actualizarse si hay algún cambio en los datos.
6.3. Probar los accesos directos de navegación
Usa las teclas Flecha Abajo y Flecha Arriba para navegar a través de la lista.
Deberías ver el enfoque moverse a diferentes elementos.
Conclusión
En este tutorial, aprendiste cómo implementar accesos directos de teclado en una aplicación Flutter usando CallbackShortcuts. Integraste Back4App para obtener y mostrar datos, y mejoraste la experiencia del usuario al permitir que los usuarios interactúen con la aplicación usando accesos directos de teclado.
Conclusiones clave
CallbackShortcuts: Simplifica la adición de atajos de teclado al mapear combinaciones de teclas directamente a funciones de retorno de llamada.
Gestión de Enfoque: Esencial para que los widgets reciban eventos de teclado.
Integración de Back4App: Proporciona un backend escalable para almacenar y recuperar datos.
Próximos Pasos
Expandir Atajos: Agregar más atajos de teclado para funcionalidad adicional.
Modificadores Específicos de Plataforma: Manejar diferencias en las teclas modificadoras entre plataformas (por ejemplo, Control vs. Command).
Accesibilidad: Asegúrate de que tu aplicación sea accesible al soportar la navegación por teclado y lectores de pantalla.
Manejo de Errores: Mejora el manejo de errores al obtener datos de Back4App.
Recursos Adicionales
﻿Documentación de Back4App﻿
﻿Guía de Parse SDK para Flutter﻿
﻿Documentación Oficial de Flutter﻿
﻿Widget CallbackShortcuts﻿
¡Feliz codificación!
Actualizado 23 Jan 2025
¿Esta página le fue útil?
Cómo crear widgets en la pantalla de inicio en Flutter con HomeWidget y Back4App
Construyendo una aplicación Flutter de arrastrar y soltar con widgets arrastrables y Back4App