Plus
Comment implémenter des raccourcis clavier dans Flutter avec CallbackShortcuts et Back4App

22min
Introduction
Les raccourcis clavier améliorent l'expérience utilisateur en fournissant un accès rapide aux actions courantes au sein d'une application. Dans Flutter, le CallbackShortcuts widget permet aux développeurs de mapper des combinaisons de touches directement à des fonctions de rappel sans avoir besoin de définir des actions ou des intentions. Cela simplifie le processus d'ajout de raccourcis clavier à votre application.
Dans ce tutoriel, vous apprendrez à intégrer CallbackShortcuts dans une application Flutter et à utiliser Back4App—un backend en tant que service alimenté par Parse Server—pour stocker et récupérer des données. À la fin de ce tutoriel, vous aurez une application Flutter qui répond aux raccourcis clavier pour effectuer des actions comme récupérer des données de Back4App.
Prérequis
Pour compléter ce tutoriel, vous aurez besoin de :
Flutter SDK installé sur votre machine. Suivez le guide d'installation officiel de Flutter pour votre système d'exploitation.
Connaissances de base en Flutter et Dart. Si vous êtes nouveau dans Flutter, consultez la documentation Flutter pour vous familiariser avec les bases.
Un IDE ou éditeur de texte tel que Visual Studio Code ou Android Studio.
Un compte Back4App. Inscrivez-vous pour un compte gratuit sur Back4App.
Parse Server SDK pour Flutter ajouté à votre projet. Apprenez à le configurer en suivant le Guide SDK Flutter de Back4App.
Un clavier physique ou un émulateur pour tester les raccourcis clavier.
Étape 1 – Configuration du projet Flutter
1.1. Créer un nouveau projet Flutter
Ouvrez votre terminal et exécutez :
Bash
flutter create callback_shortcuts_app
flutter create callback_shortcuts_app
﻿
Naviguez vers le répertoire du projet :
Bash
cd callback_shortcuts_app
cd callback_shortcuts_app
﻿
1.2. Ajouter des dépendances
Ouvrez pubspec.yaml et ajoutez les dépendances suivantes :
YAML
dependencies:
  flutter:
    sdk: flutter
  parse_server_sdk_flutter: ^4.0.1
dependencies:
  flutter:
    sdk: flutter
  parse_server_sdk_flutter: ^4.0.1
﻿
Exécutez flutter pub get pour installer les paquets.
Étape 2 – Configuration de Back4App
2.1. Créer une nouvelle application Back4App
Connectez-vous à votre tableau de bord Back4App.
Cliquez sur "Créer une nouvelle application".
Entrez un nom pour votre application, par exemple, "CallbackShortcutsApp", et cliquez sur "Créer".
2.2. Configurer le modèle de données
Dans votre tableau de bord d'application, accédez à la "Base de données" section.
Cliquez sur "Créer une classe".
Dans la modalité :
Sélectionnez "Personnalisé".
Entrez "Article" comme nom de classe.
Cliquez sur "Créer une classe".
2.3. Ajouter des colonnes à la classe
Dans la "Article" classe, cliquez sur "+" pour ajouter une nouvelle colonne.
Ajoutez les colonnes suivantes :
nom: Type Chaîne
description: Type Chaîne
Ajoutez quelques données d'exemple à la "Article" classe. Par exemple :
2.4. Obtenir les identifiants de l'application
Naviguez vers Paramètres de l'application > Sécurité et clés.
Notez votre ID d'application et Clé client.
Étape 3 – Initialisation de Parse dans votre application Flutter
Ouvrez lib/main.dart et modifiez-le comme suit :
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),
                );
              },
            ),
    );
  }
}
﻿
Explication
Classe Item: Une classe modèle pour représenter les éléments récupérés de Back4App.
fetchItems(): Récupère les données de la classe Item dans Back4App et met à jour la liste items.
build(): Affiche la liste des éléments ou un indicateur de chargement si les données sont encore en cours de récupération.
Étape 5 – Mise en œuvre des Raccourcis de Callback
Maintenant, ajoutons des raccourcis clavier pour actualiser les données et naviguer dans la liste.
5.1. Ajouter des widgets Focus et CallbackShortcuts
Modifiez le build() méthode dans 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),
                    ),
                  );
                },
              ),
      ),
    ),
  );
}
﻿
Explication
Focus Widget: Enveloppe le corps pour s'assurer qu'il peut recevoir le focus et les événements du clavier.
CallbackShortcuts: Mappe les raccourcis clavier aux fonctions de rappel.
Ctrl + R: Actualise les données en appelant fetchItems().
Flèche vers le bas: Déplace le focus vers l'élément suivant.
Flèche vers le haut: Déplace le focus vers l'élément précédent.
FocusableActionDetector: Rend chaque ListTile focalisable pour naviguer à l'aide du clavier.
5.2. Implémenter les fonctions de navigation
Ajoutez les méthodes suivantes pour gérer la navigation des éléments :
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();
  }
}
﻿
Étape 6 – Tester les raccourcis clavier
6.1. Exécuter l'application
Dans votre terminal, exécutez :
Bash
flutter run
flutter run
﻿
6.2. Tester le raccourci de rafraîchissement
Appuyez sur Ctrl + R (ou Cmd + R sur macOS) pendant que l'application est en cours d'exécution.
Vous devriez voir un message snackbar disant "Données rafraîchies".
La liste devrait se mettre à jour s'il y a des changements dans les données.
6.3. Tester les raccourcis de navigation
Utilisez les touches Flèche vers le bas et Flèche vers le haut pour naviguer dans la liste.
Vous devriez voir le focus se déplacer sur différents éléments.
Conclusion
Dans ce tutoriel, vous avez appris à implémenter des raccourcis clavier dans une application Flutter en utilisant CallbackShortcuts. Vous avez intégré Back4App pour récupérer et afficher des données, et amélioré l'expérience utilisateur en permettant aux utilisateurs d'interagir avec l'application à l'aide de raccourcis clavier.
Principales conclusions
CallbackShortcuts: Simplifie l'ajout de raccourcis clavier en mappant les combinaisons de touches directement aux fonctions de rappel.
Gestion du focus: Essentiel pour que les widgets reçoivent des événements clavier.
Intégration Back4App: Fournit un backend évolutif pour stocker et récupérer des données.
Prochaines étapes
Élargir les raccourcis: Ajouter plus de raccourcis clavier pour des fonctionnalités supplémentaires.
Modificateurs spécifiques à la plateforme: Gérer les différences dans les touches de modification entre les plateformes (par exemple, Control vs. Command).
Accessibilité: Assurez-vous que votre application est accessible en prenant en charge la navigation au clavier et les lecteurs d'écran.
Gestion des erreurs: Améliorer la gestion des erreurs lors de la récupération des données depuis Back4App.
Ressources supplémentaires
﻿Documentation Back4App﻿
﻿Guide du SDK Parse pour Flutter﻿
﻿Documentation officielle de Flutter﻿
﻿Widget CallbackShortcuts﻿
Bonne programmation !
Mis à jour 23 Jan 2025
Cette page vous a-t-elle aidée?
Comment créer des widgets d'écran d'accueil dans Flutter avec HomeWidget et Back4App
Créer une application Flutter glisser-déposer avec des widgets draggable et Back4App