Di più
Come implementare le scorciatoie da tastiera in Flutter con CallbackShortcuts e Back4App?

24min
Introduzione
Le scorciatoie da tastiera migliorano l'esperienza dell'utente fornendo accesso rapido ad azioni comuni all'interno di un'applicazione. In Flutter, il CallbackShortcuts widget consente agli sviluppatori di mappare combinazioni di tasti della tastiera direttamente a funzioni di callback senza la necessità di definire azioni o intenti. Questo semplifica il processo di aggiunta di scorciatoie da tastiera alla tua app.
In questo tutorial, imparerai come integrare CallbackShortcuts in un'applicazione Flutter e utilizzare Back4App—un backend-as-a-service alimentato da Parse Server—per memorizzare e recuperare dati. Alla fine di questo tutorial, avrai un'app Flutter che risponde a scorciatoie da tastiera per eseguire azioni come il recupero di dati da Back4App.
Requisiti
Per completare questo tutorial, avrai bisogno di:
Flutter SDK installato sul tuo computer. Segui la guida ufficiale all'installazione di Flutter per il tuo sistema operativo.
Conoscenze di base di Flutter e Dart. Se sei nuovo a Flutter, rivedi la documentazione di Flutter per familiarizzare con le basi.
Un IDE o editor di testo come Visual Studio Code o Android Studio.
Un account Back4App. Registrati per un account gratuito su Back4App.
Parse Server SDK per Flutter aggiunto al tuo progetto. Scopri come configurarlo seguendo la Guida SDK Flutter di Back4App.
Una tastiera fisica o un emulatore per testare le scorciatoie da tastiera.
Passo 1 – Configurazione del Progetto Flutter
1.1. Crea un Nuovo Progetto Flutter
Apri il tuo terminale e esegui:
Bash
flutter create callback_shortcuts_app
flutter create callback_shortcuts_app
﻿
Naviga nella directory del progetto:
Bash
cd callback_shortcuts_app
cd callback_shortcuts_app
﻿
1.2. Aggiungi Dipendenze
Apri pubspec.yaml e aggiungi le seguenti dipendenze:
YAML
dependencies:
  flutter:
    sdk: flutter
  parse_server_sdk_flutter: ^4.0.1
dependencies:
  flutter:
    sdk: flutter
  parse_server_sdk_flutter: ^4.0.1
﻿
Esegui flutter pub get per installare i pacchetti.
Passo 2 – Configurazione di Back4App
2.1. Crea una Nuova Applicazione Back4App
Accedi al tuo dashboard di Back4App.
Clicca su "Crea nuova App".
Inserisci un nome per la tua applicazione, ad esempio, "CallbackShortcutsApp", e clicca su "Crea".
2.2. Configura il Modello di Dati
Nel tuo cruscotto dell'applicazione, vai alla "Database" sezione.
Clicca su "Crea una classe".
Nella finestra modale:
Seleziona "Personalizzato".
Inserisci "Elemento" come nome della classe.
Clicca "Crea classe".
2.3. Aggiungi colonne alla classe
Nella classe "Elemento" clicca su "+" per aggiungere una nuova colonna.
Aggiungi le seguenti colonne:
nome: Tipo Stringa
descrizione: Tipo Stringa
Aggiungi alcuni dati di esempio alla "Elemento" classe. Ad esempio:
2.4. Ottieni le credenziali dell'applicazione
Naviga a Impostazioni App > Sicurezza e Chiavi.
Annota il tuo ID Applicazione e Chiave Client.
Passo 3 – Inizializzazione di Parse nella tua App Flutter
Apri lib/main.dart e modificalo come segue:
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(),
    );
  }
}
﻿
Sostituisci 'YOUR_APPLICATION_ID' e 'YOUR_CLIENT_KEY' con le tue credenziali effettive di Back4App.
Passo 4 – Recupero Dati da Back4App
Crea un nuovo 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),
                );
              },
            ),
    );
  }
}
﻿
Spiegazione
Classe Item: Una classe modello per rappresentare gli elementi recuperati da Back4App.
fetchItems(): Recupera i dati dalla classe Item in Back4App e aggiorna la lista items.
build(): Visualizza la lista degli elementi o un indicatore di caricamento se i dati sono ancora in fase di recupero.
Passo 5 – Implementazione di CallbackShortcuts
Ora, aggiungiamo le scorciatoie da tastiera per aggiornare i dati e navigare nella lista.
5.1. Aggiungi i widget Focus e CallbackShortcuts
Modifica il build() metodo 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),
                    ),
                  );
                },
              ),
      ),
    ),
  );
}
﻿
Spiegazione
Focus Widget: Avvolge il corpo per garantire che possa ricevere eventi di focus e tastiera.
CallbackShortcuts: Mappa le scorciatoie da tastiera a funzioni di callback.
Ctrl + R: Aggiorna i dati chiamando fetchItems().
Freccia Giù: Sposta il focus al prossimo elemento.
Freccia Su: Sposta il focus all'elemento precedente.
FocusableActionDetector: Rende ogni ListTile focalizzabile per navigare usando la tastiera.
5.2. Implementare le Funzioni di Navigazione
Aggiungi i seguenti metodi per gestire la navigazione degli elementi:
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();
  }
}
﻿
Passo 6 – Testare le Scorciatoie da Tastiera
6.1. Esegui l'App
Nel tuo terminale, esegui:
Bash
flutter run
flutter run
﻿
6.2. Testa la Scorciatoia di Aggiornamento
Premi Ctrl + R (o Cmd + R su macOS) mentre l'app è in esecuzione.
Dovresti vedere un messaggio snackbar che dice "Dati aggiornati".
L'elenco dovrebbe aggiornarsi se ci sono modifiche nei dati.
6.3. Testa le Scorciatoie di Navigazione
Usa i tasti Freccia Giù e Freccia Su per navigare nell'elenco.
Dovresti vedere il focus spostarsi su diversi elementi.
Conclusione
In questo tutorial, hai imparato come implementare le scorciatoie da tastiera in un'applicazione Flutter utilizzando CallbackShortcuts. Hai integrato Back4App per recuperare e visualizzare i dati, e hai migliorato l'esperienza utente consentendo agli utenti di interagire con l'app utilizzando le scorciatoie da tastiera.
Punti Chiave
CallbackShortcuts: Semplifica l'aggiunta di scorciatoie da tastiera mappando le combinazioni di tasti direttamente a funzioni di callback.
Gestione del Focus: Essenziale per i widget per ricevere eventi da tastiera.
Integrazione Back4App: Fornisce un backend scalabile per memorizzare e recuperare dati.
Prossimi Passi
Espandi Scorciatoie: Aggiungi più scorciatoie da tastiera per funzionalità aggiuntive.
Modificatori Specifici della Piattaforma: Gestisci le differenze nei tasti modificatori tra le piattaforme (ad es., Control vs. Command).
Accessibilità: Assicurati che la tua app sia accessibile supportando la navigazione da tastiera e i lettori di schermo.
Gestione degli Errori: Migliora la gestione degli errori durante il recupero dei dati da Back4App.
Risorse Aggiuntive
﻿Documentazione Back4App﻿
﻿Guida SDK Parse per Flutter﻿
﻿Documentazione Ufficiale Flutter﻿
﻿Widget CallbackShortcuts﻿
Buona Programmazione!
Aggiornato 23 Jan 2025
Questa pagina ti è stata di aiuto?
Come creare widget per la schermata principale in Flutter con HomeWidget e Back4App?
AVANTI IL PROSSIMO
Costruisci un'app Flutter con funzionalità di trascinamento e rilascio utilizzando widget trascinabili e Back4App