Mehr
Wie man Tastenkombinationen in Flutter mit CallbackShortcuts und Back4App implementiert

24min
Einführung
Tastenkombinationen verbessern das Benutzererlebnis, indem sie schnellen Zugriff auf häufige Aktionen innerhalb einer Anwendung bieten. In Flutter ermöglicht das CallbackShortcuts-Widget Entwicklern, Tastenkombinationen direkt auf Callback-Funktionen abzubilden, ohne dass Aktionen oder Absichten definiert werden müssen. Dies vereinfacht den Prozess, Tastenkombinationen zu Ihrer App hinzuzufügen.
In diesem Tutorial lernen Sie, wie Sie CallbackShortcuts in eine Flutter-Anwendung integrieren und Back4App—einen Backend-as-a-Service, der von Parse Server betrieben wird—verwenden, um Daten zu speichern und abzurufen. Am Ende dieses Tutorials haben Sie eine Flutter-App, die auf Tastenkombinationen reagiert, um Aktionen wie das Abrufen von Daten von Back4App auszuführen.
Voraussetzungen
Um dieses Tutorial abzuschließen, benötigen Sie:
Flutter SDK auf Ihrem Computer installiert. Befolgen Sie die offizielle Flutter-Installationsanleitung für Ihr Betriebssystem.
Grundkenntnisse in Flutter und Dart. Wenn Sie neu in Flutter sind, lesen Sie die Flutter-Dokumentation um sich mit den Grundlagen vertraut zu machen.
Eine IDE oder einen Texteditor wie Visual Studio Code oder Android Studio.
Ein Back4App-Konto. Melden Sie sich für ein kostenloses Konto bei Back4App an.
Parse Server SDK für Flutter in Ihr Projekt integriert. Erfahren Sie, wie Sie es einrichten, indem Sie die Back4App Flutter SDK-Anleitung befolgen.
Eine physische Tastatur oder einen Emulator zum Testen von Tastenkombinationen.
Schritt 1 – Einrichten des Flutter-Projekts
1.1. Erstellen eines neuen Flutter-Projekts
Öffnen Sie Ihr Terminal und führen Sie aus:
Bash
flutter create callback_shortcuts_app
flutter create callback_shortcuts_app
﻿
Navigieren Sie zum Projektverzeichnis:
Bash
cd callback_shortcuts_app
cd callback_shortcuts_app
﻿
1.2. Abhängigkeiten hinzufügen
Öffnen Sie pubspec.yaml und fügen Sie die folgenden Abhängigkeiten hinzu:
YAML
dependencies:
  flutter:
    sdk: flutter
  parse_server_sdk_flutter: ^4.0.1
dependencies:
  flutter:
    sdk: flutter
  parse_server_sdk_flutter: ^4.0.1
﻿
Führen Sie flutter pub get aus, um die Pakete zu installieren.
Schritt 2 – Back4App einrichten
2.1. Erstellen Sie eine neue Back4App-Anwendung
Melden Sie sich bei Ihrem Back4App-Dashboard an.
Klicken Sie auf "Neue App erstellen".
Geben Sie einen Namen für Ihre Anwendung ein, z.B. "CallbackShortcutsApp", und klicken Sie auf "Erstellen".
2.2. Datenmodell einrichten
Navigieren Sie in Ihrem Anwendungs-Dashboard zum "Datenbank" Abschnitt.
Klicken Sie auf "Klasse erstellen".
Im Modal:
Wählen Sie "Benutzerdefiniert".
Geben Sie "Artikel" als Klassennamen ein.
Klicken Sie auf "Klasse erstellen".
2.3. Spalten zur Klasse hinzufügen
Klicken Sie in der "Artikel" Klasse auf "+" um eine neue Spalte hinzuzufügen.
Fügen Sie die folgenden Spalten hinzu:
name: Typ String
beschreibung: Typ String
Fügen Sie einige Beispieldaten zur "Artikel" Klasse hinzu. Zum Beispiel:
2.4. Anwendungsanmeldeinformationen erhalten
Navigieren Sie zu App-Einstellungen > Sicherheit & Schlüssel.
Notieren Sie sich Ihre Anwendungs-ID und Client-Schlüssel.
Schritt 3 – Initialisierung von Parse in Ihrer Flutter-App
Öffnen Sie lib/main.dart und ändern Sie es wie folgt:
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(),
    );
  }
}
﻿
Ersetzen Sie 'IHRE_ANWENDUNGS_ID' und 'IHRE_CLIENT_ID' durch Ihre tatsächlichen Back4App-Anmeldeinformationen.
Schritt 4 – Daten von Back4App abrufen
Erstellen Sie eine neue Datei 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),
                );
              },
            ),
    );
  }
}
﻿
Erklärung
Item-Klasse: Eine Modellklasse zur Darstellung der von Back4App abgerufenen Elemente.
fetchItems(): Ruft Daten aus der Item-Klasse in Back4App ab und aktualisiert die items-Liste.
build(): Zeigt die Liste der Elemente oder einen Ladeindikator an, wenn die Daten noch abgerufen werden.
Schritt 5 – Implementierung von CallbackShortcuts
Jetzt fügen wir Tastenkombinationen hinzu, um die Daten zu aktualisieren und durch die Liste zu navigieren.
5.1. Fügen Sie Focus- und CallbackShortcuts-Widgets hinzu
Ändern Sie die build() Methode 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),
                    ),
                  );
                },
              ),
      ),
    ),
  );
}
﻿
Erklärung
Focus Widget: Umhüllt den Körper, um sicherzustellen, dass er den Fokus und Tastaturereignisse empfangen kann.
CallbackShortcuts: Ordnet Tastenkombinationen Callback-Funktionen zu.
Strg + R: Aktualisiert die Daten, indem fetchItems() aufgerufen wird.
Pfeil nach unten: Verschiebt den Fokus zum nächsten Element.
Pfeil nach oben: Verschiebt den Fokus zum vorherigen Element.
FocusableActionDetector: Macht jedes ListTile fokussierbar, um mit der Tastatur zu navigieren.
5.2. Implementierung von Navigationsfunktionen
Fügen Sie die folgenden Methoden hinzu, um die Elementnavigation zu handhaben:
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();
  }
}
﻿
Schritt 6 – Testen von Tastenkombinationen
6.1. App ausführen
Führen Sie in Ihrem Terminal aus:
Bash
flutter run
flutter run
﻿
6.2. Testen Sie die Aktualisierungsverknüpfung
Drücken Sie Ctrl + R (oder Cmd + R auf macOS), während die App läuft.
Sie sollten eine Snackbar-Nachricht sehen, die sagt "Daten aktualisiert".
Die Liste sollte sich aktualisieren, wenn es Änderungen in den Daten gibt.
6.3. Testen Sie die Navigationsverknüpfungen
Verwenden Sie die Pfeil nach unten und Pfeil nach oben Tasten, um durch die Liste zu navigieren.
Sie sollten sehen, wie der Fokus auf verschiedene Elemente verschoben wird.
Fazit
In diesem Tutorial haben Sie gelernt, wie Sie Tastenkombinationen in einer Flutter-Anwendung mit Hilfe von CallbackShortcuts, implementieren. Sie haben Back4App integriert, um Daten abzurufen und anzuzeigen, und das Benutzererlebnis verbessert, indem Sie es den Benutzern ermöglicht haben, mit der App über Tastenkombinationen zu interagieren.
Wichtige Erkenntnisse
CallbackShortcuts: Vereinfacht das Hinzufügen von Tastenkombinationen, indem Tastenkombinationen direkt auf Callback-Funktionen abgebildet werden.
Fokusverwaltung: Essentiell für Widgets, um Tastaturereignisse zu empfangen.
Back4App-Integration: Bietet ein skalierbares Backend zum Speichern und Abrufen von Daten.
Nächste Schritte
Erweiterte Shortcuts: Fügen Sie weitere Tastenkombinationen für zusätzliche Funktionen hinzu.
Plattformspezifische Modifikatoren: Berücksichtigen Sie Unterschiede bei den Modifikatortasten zwischen Plattformen (z. B. Control vs. Command).
Barrierefreiheit: Stellen Sie sicher, dass Ihre App zugänglich ist, indem Sie die Tastaturnavigation und Screenreader unterstützen.
Fehlerbehandlung: Verbessern Sie die Fehlerbehandlung beim Abrufen von Daten von Back4App.
Zusätzliche Ressourcen
﻿Back4App-Dokumentation﻿
﻿Parse SDK für Flutter-Leitfaden﻿
﻿Flutter Offizielle Dokumentation﻿
﻿CallbackShortcuts-Widget﻿
Viel Spaß beim Programmieren!
Aktualisiert 23 Jan 2025
Hat Ihnen diese Seite geholfen?
So erstellen Sie Widgets auf dem Startbildschirm in Flutter mit HomeWidget und Back4App
ALS NÄCHSTES
Erstellen einer Drag-and-Drop Flutter-App mit draggable Widgets und Back4App