Deep Linking und komplexe Navigation in Flutter

Deep Linking und Navigation sind zwei essenzielle Aspekte, die das Nutzererlebnis in mobilen Apps maßgeblich beeinflussen. Deep Links ermöglichen es, User direkt zu spezifischen Inhalten innerhalb einer App zu führen, anstatt sie nur auf die Startseite zu leiten. Dies ist besonders nützlich, wenn Inhalte über soziale Medien oder Marketingkampagnen geteilt werden. Navigation hingegen regelt, wie Benutzer durch die App geführt werden und wie Inhalte organisiert sind. Eine durchdachte Navigationsstruktur sorgt dafür, dass sich Benutzer intuitiv durch die App bewegen können.

In FlutterFlutterEin Framework von Google, mit dem aus einer Codebasis Apps für iOS und Android und auch Weboberflächen entstehen. Das spart ein zweites Team und hält beide Plattformen auf demselben Stand.Mehr im Glossar → gibt es verschiedene Möglichkeiten, Deep Links und Navigation zu implementieren. Die Nutzung der go_router-Bibliothek hat sich in letzter Zeit als äußerst beliebte Methode etabliert, um komplexe Navigationsstrukturen effizient zu verwalten. Mit go_router kannst Du flexible Routen erstellen, URL-basierte Navigation unterstützen und Deep Links nahtlos integrieren. In diesem Artikel erfährst Du, wie Du Deep Links einrichtest und wie go_router Dir dabei hilft, selbst komplizierte Navigationslogiken in Flutter zu meistern.

Deep Links in Flutter

Deep Links sind URLs, die Nutzer direkt in spezifische Bereiche einer App führen, anstatt nur die App zu öffnen. Dies verbessert die Nutzererfahrung erheblich, da sie direkt zu relevanten Inhalten weitergeleitet werden. Es gibt zwei Haupttypen von Deep Links:

• Basic Deep Links: Leiten den Benutzer in die App weiter, ohne dass sichergestellt wird, ob die App installiert ist. Ist die App nicht installiert, führt der Link ins Leere.
• Deferred/Universal Links: Diese leiten den Nutzer, falls die App nicht installiert ist, zunächst zum App Store und führen nach der Installation zu dem ursprünglich verlinkten Inhalt.

1. In Flutter Deep Links verarbeiten:

• Nutze das app_links-Package, um Deep Links in Deiner App zu verarbeiten (uni_links wird nicht mehr gepflegt). Der Stream liefert sowohl den Link, mit dem die App aus dem beendeten Zustand gestartet wurde, als auch alle Links, die danach eintreffen. Rufe initDeepLinkListener() deshalb früh auf, etwa in main(). Nutzt Du go_router (siehe unten), verarbeitet Flutters Router eingehende Links bereits selbst; dann brauchst Du dieses Package nur für eigene Logik:

import 'dart:async';
import 'package:app_links/app_links.dart';

final appLinks = AppLinks();
StreamSubscription<Uri>? linkSubscription;

void initDeepLinkListener() {
  // Liefert den Start-Link der App und alle Links, die danach eintreffen
  linkSubscription = appLinks.uriLinkStream.listen((Uri uri) {
    // Hier kannst Du die Navigation basierend auf dem Link verarbeiten
    print('Received deep link: $uri');
  });
}

1. Testing der Deep Links:

• Teste Deine Deep Links, indem Du eine URL von einem Browser oder einem Messaging-Dienst öffnest. Auf Android kannst Du zudem den adb Befehl verwenden:

adb shell am start -W -a android.intent.action.VIEW -d "https://www.deine-domain.de/angebot" com.deineapp

go_router für komplexe Navigationsstrukturen

Die go_router-Bibliothek bietet eine elegante Lösung, um komplexe Navigationsstrukturen in Flutter-Apps effizient zu verwalten. Im Gegensatz zur standardmäßigen Navigator-API von Flutter, die oft durch manuelles Routing und das Verfolgen von Routen kompliziert wird, ermöglicht go_router eine deklarative und URL-basierte Navigation. Dies macht es nicht nur einfacher, mit komplexen Routen umzugehen, sondern auch die Integration von Deep Links und Web-ähnlichen Navigationsmustern wird vereinfacht.

Vorteile von go_router

• URL-basierte Navigation: Wie bei Webanwendungen kannst Du die Navigation Deiner App durch URLs steuern, was besonders bei Deep Links und dem Web-Teil von Flutter-Apps hilfreich ist.
• Einfaches Routing: Anstatt die Navigation manuell mit der Navigator-API zu handhaben, definierst Du alle Routen auf deklarative Weise, was die Übersichtlichkeit und Wartbarkeit erhöht.
• Unterstützung von Deep Links und dynamischen Routen: Mit go_router lassen sich dynamische URL-Segmente und Parameter leicht verarbeiten, was für flexible und dynamische Apps unerlässlich ist.
• Redirects und Fehlerrouten: Du kannst einfach Weiterleitungen oder 404-Seiten in Deiner App implementieren, wenn Benutzer auf ungültige Links zugreifen.

Beispiel: Grundlegendes Setup von go_router

Um go_router zu verwenden, musst Du es zuerst zu Deinem Projekt hinzufügen:

dependencies:
  go_router: ^18.0.0 # aktuelle Version auf pub.dev prüfen

In deinem main.dart richtest Du den GoRouter ein und definierst die Routen:

import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';

void main() {
  final GoRouter _router = GoRouter(
    routes: [
      GoRoute(
        path: '/',
        builder: (context, state) => HomeScreen(),
      ),
      GoRoute(
        path: '/details/:id',
        builder: (context, state) {
          final id = state.pathParameters['id'];
          return DetailsScreen(id: id);
        },
      ),
    ],
    errorBuilder: (context, state) => ErrorScreen(),
  );

  runApp(MyApp(router: _router));
}

class MyApp extends StatelessWidget {
  final GoRouter router;

  const MyApp({Key? key, required this.router}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp.router(routerConfig: router);
  }
}

Aufbau komplexer Routenstrukturen

Ein wesentlicher Vorteil von go_router ist die Fähigkeit, verschachtelte und dynamische Routen zu unterstützen. Ein Beispiel für eine komplexere Struktur mit Unterrouten könnte so aussehen:

final GoRouter _router = GoRouter(
  routes: [
    GoRoute(
      path: '/',
      builder: (context, state) => HomeScreen(),
      routes: [
        GoRoute(
          path: 'profile/:username',
          builder: (context, state) {
            final username = state.pathParameters['username'];
            return ProfileScreen(username: username);
          },
        ),
        GoRoute(
          path: 'settings',
          builder: (context, state) => SettingsScreen(),
        ),
      ],
    ),
  ],
);

Named Routes und einfache Navigation

Ein weiteres Feature von go_router ist die Unterstützung von Named Routes. Dies ermöglicht es Dir, Routen durch Namen anstelle von Pfaden anzusteuern, was besonders bei größeren Projekten mit vielen dynamischen Routen hilfreich ist:

GoRoute(
  name: 'profile',
  path: '/profile/:username',
  builder: (context, state) {
    final username = state.pathParameters['username'];
    return ProfileScreen(username: username);
  },
);

Du kannst nun einfach zur Profilseite navigieren, ohne den Pfad manuell anzugeben:

context.goNamed('profile', pathParameters: {'username': 'flutterdev'});

Mit go_router wird das Navigationsmanagement in Flutter erheblich vereinfacht. Die klare Struktur der Routen und die einfache Handhabung von Deep Links machen es zur perfekten Wahl für komplexere Apps.

Integration von Deep Links mit go_router

Die Integration von Deep Links in eine Flutter-App mit der go_router-Bibliothek ist eine äußerst effiziente Möglichkeit, Nutzern ein nahtloses Erlebnis zu bieten, wenn sie über externe Links direkt zu spezifischen Inhalten in Deiner App navigieren. go_router nutzt eine URL-basierte Struktur, die es einfach macht, Deep Links zu verarbeiten und die Navigation entsprechend anzupassen.

Deep Links mit go_router verwenden

Da go_router die URL-basierte Navigation nativ unterstützt, kannst Du Deep Links direkt mit den definierten Routen verbinden. Wenn Deine App über einen Deep Link geöffnet wird, erkennt go_router die URL und navigiert zu der entsprechenden Route.

Beispiel einer Routenstruktur mit Deep Links

Stell Dir vor, Du möchtest, dass Deine App über einen Deep Link direkt zu einem Produkt führt, beispielsweise unter der URL https://www.deineapp.de/product/123. Dies lässt sich einfach durch eine Route mit einem dynamischen Parameter in go_router realisieren:

final GoRouter _router = GoRouter(
  routes: [
    GoRoute(
      path: '/',
      builder: (context, state) => HomeScreen(),
    ),
    GoRoute(
      path: '/product/:id',
      builder: (context, state) {
        final id = state.pathParameters['id'];
        return ProductDetailScreen(productId: id);
      },
    ),
  ],
);

Wenn Deine App nun über den Deep Link https://www.deineapp.de/product/123 geöffnet wird, erkennt go_router die URL, extrahiert den id-Parameter und zeigt die ProductDetailScreen mit der ID 123 an.

Umgang mit URL-Parametern und Query-Parametern

go_router macht es auch einfach, URL- und Query-Parameter zu verarbeiten. Angenommen, Du möchtest zusätzliche Informationen über Query-Parameter in der URL weitergeben, wie z.B. eine Sortiermethode für ein Produkt. Die URL könnte dann so aussehen: https://www.deineapp.de/product/123?sort=price.

Um dies in go_router zu integrieren, kannst Du die Query-Parameter aus dem state Objekt abrufen:

GoRoute(
  path: '/product/:id',
  builder: (context, state) {
    final id = state.pathParameters['id'];
    final sort = state.uri.queryParameters['sort'];
    return ProductDetailScreen(productId: id, sortBy: sort);
  },
);

Mit diesem Code kannst Du sowohl den dynamischen URL-Parameter id als auch den Query-Parameter sort verwenden und die entsprechende Ansicht basierend auf diesen Informationen anpassen.

Automatisches Navigieren basierend auf Deep Links

go_router verarbeitet Deep Links automatisch, sobald Deine App geöffnet wird. Du musst sicherstellen, dass Deine Routen so konfiguriert sind, dass sie die in den Links enthaltenen Informationen korrekt verarbeiten.

Ein Beispiel zur automatischen Weiterleitung basierend auf einem Deep Link:

GoRoute(
  path: '/special-offer',
  builder: (context, state) => SpecialOfferScreen(),
);

Wenn ein Benutzer nun auf einen Deep Link wie https://www.deineapp.de/special-offer klickt, wird er direkt zur SpecialOfferScreen weitergeleitet, auch wenn die App geschlossen war.

Umgang mit nicht existierenden Deep Links

Um sicherzustellen, dass Benutzer bei ungültigen Deep Links nicht auf einer leeren Seite landen, kannst Du eine 404-Seite definieren:

final GoRouter _router = GoRouter(
  routes: [
    GoRoute(
      path: '/',
      builder: (context, state) => HomeScreen(),
    ),
    GoRoute(
      path: '/product/:id',
      builder: (context, state) {
        final id = state.pathParameters['id'];
        return ProductDetailScreen(productId: id);
      },
    ),
  ],
  errorBuilder: (context, state) => NotFoundScreen(),
);

Wenn ein Benutzer einen Deep Link zu einer nicht definierten Route öffnet, leitet go_router ihn automatisch auf die NotFoundScreen weiter, anstatt einen Fehler auszulösen. Dies sorgt für eine bessere Benutzererfahrung und vermeidet Frustrationen durch ungültige Links.

Fazit zur Integration von Deep Links mit go_router

Die nahtlose Integration von Deep Links mit go_router erleichtert es erheblich, Nutzer auf spezifische Inhalte zu leiten, unabhängig davon, ob die App bereits geöffnet ist oder nicht. Durch die Nutzung von URL- und Query-Parametern kannst Du die Navigation dynamisch und flexibel gestalten. Dies ist besonders hilfreich in Anwendungen, die komplexe Routen und benutzerspezifische Inhalte anzeigen müssen. Mit den erweiterten Funktionen von go_router kannst Du sicherstellen, dass Deep Links in Deiner App nicht nur effizient, sondern auch benutzerfreundlich funktionieren.

Fazit

Deep Linking und Navigation sind entscheidende Komponenten für eine gut strukturierte und benutzerfreundliche Flutter-App. Die richtige Implementierung von Deep Links verbessert das Nutzererlebnis, indem User direkt zu relevanten Inhalten in der App gelangen, egal ob die App schon geöffnet ist oder nicht. Dies ist besonders wichtig für Marketingkampagnen, personalisierte Benachrichtigungen und Social Media Sharing.

Mit der go_router-Bibliothek bietet Flutter eine elegante und leistungsfähige Möglichkeit, komplexe Navigationsstrukturen umzusetzen. Durch die deklarative Herangehensweise an Routing und die nahtlose Unterstützung von URL- und Query-Parametern ermöglicht go_router eine einfache Handhabung von Deep Links und dynamischen Routen. Die Kombination aus klarer Routenverwaltung und der Integration von Weiterleitungen oder Fehlerseiten (z.B. 404-Seiten) sorgt dafür, dass Deine App auch bei unerwarteten Links oder Nutzerinteraktionen stabil bleibt.

Die Einrichtung von Deep Links in Flutter kann zunächst komplex erscheinen, insbesondere durch die plattformspezifischen Anforderungen für Android und iOS. Doch durch den gezielten Einsatz von Tools wie go_router wird der Prozess deutlich vereinfacht und effizienter gestaltet. So kannst Du sicherstellen, dass Nutzer jederzeit die beste User-Experience erhalten – ob durch direkte Links, dynamische Routen oder eine durchdachte Navigationsstruktur.

Wenn Du diese Best Practices befolgst, wird Deine App nicht nur professioneller und benutzerfreundlicher, sondern auch technisch besser für komplexe Anwendungsfälle vorbereitet sein.

Gerne unterstütze ich Dich bei der Umsetzung von Deep Linking und komplexen Navigationsstrukturen in Deiner Flutter-App! Ob Du Hilfe bei der Einrichtung von Deep Links oder bei der Implementierung von go_router für dynamische Routen benötigst – ich stehe Dir zur Seite, um Dein Projekt effizient und professionell voranzutreiben. Melde Dich einfach und wir finden gemeinsam die optimale Lösung für Deine App!