Der Eintrag "offcanvas-col1" existiert leider nicht.

Der Eintrag "offcanvas-col2" existiert leider nicht.

Der Eintrag "offcanvas-col3" existiert leider nicht.

Der Eintrag "offcanvas-col4" existiert leider nicht.

Die Telefonnummer wird mit JavaScript generiert.

Mit Quick Actions Schnellzugriffe in Flutter Apps umsetzen

von
Mit Quick Actions Schnellzugriffe in Flutter Apps umsetzen

Als Entwickler von Mobile Apps ist es möglich, Abkürzungen zu bestimmten App-Screens oder Funktionen auf dem Home Screen zu hinterlegen. Doch was genau sind Quick Actions? Diese haben unterschiedliche Namen auf den mobilen Plattformen (App Shortcut (unter Android) / Home Screen Quick Actions (unter IOS)), beschreiben aber dasselbe Konzept: durch einen langen Tab auf das App-Icon öffnet sich ein Kontext-Menü, aus dem die Abkürzungen gewählt werden kann. Je nach gewählter Aktion öffnet sich die App und die Nutzer gelangen direkt zur gewünschten Seiten oder Funktion.

Quick Actions unter iOS (Home Screen Quick Action)

Quick Actions unter iOS

Quick Actions unter Android (App Shortcut)

Quick Actions unter Android

Diese Funktionalität kann dank des offiziellen quick_actions Plugins auch direkt in Flutter Apps für iOS und Android integriert werden. Wie das klappt und worauf man achten sollte, möchte ich kurz in diesem Blogpost beschreiben.

Einbindung und Nutzung von Quick Actions

Als Erstes muss das quick_actions Package in der pubspec.yaml eingebunden werden:

dependencies:
  flutter:
    sdk: flutter
    …
  quick_actions: ^0.6.0+10

Nun kann das Package genutzt werden. An welchem Widget die Quick Actions initiiert werden, macht einen großen Unterschied. Denn erst, wenn der Nutzer dieses Widget aufruft, werden die Quick Actions registriert und erscheinen auf dem Homescreen. Daher sollte die Registrierung so früh wie möglich geschehen. Diesen Umstand kann man sich aber zu Nutze machen, wenn z.B. gewisse Funktionen hinter einem Login geschützt sind.  Dafür ergänzen wir in der initState-Methodes eines Stateful-Widgets das Folgende:

@override
void initState() {
  super.initState();
  final QuickActions quickActions = QuickActions();
  // register shortcut handling
  quickActions.initialize((String shortcutType) {
    if (shortcutType == 'shortcutOne') {
      // handle shortcut, e.g. navigation
    }
    if (shortcutType == 'shortcutTwo') {
      // handle shortcut, e.g. navigation
    }
  });

  // register shortcut items
  quickActions.setShortcutItems(<ShortcutItem>[
    ShortcutItem(
      type: 'shortcutOne',
      localizedTitle: 'Quick Action 1',
      icon: 'bookmark',
    ),
    ShortcutItem(
      type: 'shortcutTwo',
      localizedTitle: 'Quick Action 2',
      icon: 'bookmark',
    ),
  ]);
}

Im ersten Teil wird das Shortcut-Handling definiert. Dieser Teil wird ausgeführt, wenn die App mittels des korrespondierenden ShortcutItems geöffnet wird. Hier kann z.B. zu einer bestimmten Übersichtsseite navigiert oder eine spezielle Funktion ausgelöst werden. Wichtig dabei ist, dass der String shortcutType mit einem der danach definierten ShortcutItems korrespondiert.

Im zweiten Schritt werden die ShortcutItems definiert, welche das Aussehen auf dem Homescreen festlegen. Der type, wie eben schon beschrieben, ist der Identifikator, über den Aktionen ausgelöst werden. LocalizedTitle ist der String, der im Kontextmenü ausgegeben wir, neben dem als icon definierten Piktogramm. Je nach Plattform ist die Reihenfolge der ShortcutItems auf dem Homescreen entweder auf- oder absteigend sortiert, wobei dies im Test leider zwischen Android Versionen nicht konsistent war. Dies muss vor der Produktivschaltung unbedingt auf physikalischen Geräten nachgetestet werden.

Bei icon handelt es sich nicht um ein Flutter-Icon sondern eine native Ressource (wie einem xcasset im Fall von iOS). Für dieses Beispiel habe ich einfach das iOS Bookmark Icon herangezogen und als PNG in die nativen Teile des Projekts ergänzt. In einer produktiven App sollten plattformspezifische Icons verwendet werden. Um iOS das Icon zur Verfügung zu stellen, muss mittels Xcode im Runner ein Asset Catalog (als neue Datei) angelegt werden. Darin wird ein Asset erzeugt, das denselben Namen erhält wie das icon des ShortcutItem. Im Fall von Android können die Bilddateien direkt in die drawable und mipmap-* Verzeichnisse unter android/app/src/main/res gelegt werden, wieder entsprechend benannt.

Hinweis: Aktuell kann es zu Problemen mit den Icons in Produktions-Builds kommen, da diese als ungenutzt erachtet und nicht mit exportiert werden. Mehr Informationen und Workaround im GitHub-Issue: https://github.com/flutter/flutter/issues/51455

Um beim Beispiel mit geschützten Funktionen zu bleiben, können die Quick Actions bei einem Logout des Nutzers auch wieder entfernt werden. Dafür kann man an der Logout-Funktion einfach folgenden Aufruf ergänzen:

quickActions.clearShortcutItems();

Zu beachten ist, dass damit alle Quick Actions entfernt werden. Soll ein Teil weiter angezeigt werden, müsste man diese direkt im Anschluss wieder registrieren.

Fazit zu Quick Actions in Flutter

Dank des offiziellen Packages lassen sich Quick Actions schnell und einfach in die eigene Flutter-App integrieren, einzig die Einbindung der Icons kann etwas Arbeit bereiten. Ohne großen Aufwand erreicht man einen Mehrwert für seine Endnutzer, die so wichtige oder viel besuchte Funktionen der App schnell aufrufen können. Dabei sollte man sich auf 3 - 4 Quick Actions beschränken, um die Übersichtlichkeit zu gewährleisten. Zudem werden auf vielen Geräten nicht mehr als 4 Quick Actions angezeigt.

Kategorien: DartFlutter

Zurück

© 2006-2022 exensio GmbH
Einstellungen gespeichert
Datenschutzeinstellungen

Wir nutzen Cookies auf unserer Website. Einige von ihnen sind essenziell, während andere uns helfen, diese Website und Ihre Erfahrung zu verbessern.

Sie können Ihre Einwilligung jederzeit ändern oder widerrufen, indem Sie auf den Link in der Datenschutzerklärung klicken.

Zu den gesetzlichen Rechenschaftspflichten gehört die Einwilligung (Opt-In) zu protokollieren und archivieren. Aus diesem Grund wird Ihre Opt-In Entscheidung in eine LOG-Datei geschrieben. In dieser Datei werden folgende Daten gespeichert:

 

  • IP-Adresse des Besuchers
  • Vom Besucher gewählte Datenschutzeinstellung (Privacy Level)
  • Datum und Zeit des Speicherns
  • Domain
You are using an outdated browser. The website may not be displayed correctly. Close