Diese Seite wurde von der Cloud Translation API übersetzt.

WebView zur Flutter-App hinzufügen

1. Einführung

Zuletzt aktualisiert: 19.10.2021

Mit dem WebView Flutter-Plug-in können Sie Ihrer Android- oder iOS-Flutter-App ein WebView-Widget hinzufügen. Unter iOS wird das WebView-Widget von einem WKWebView unterstützt, unter Android von einem WebView. Das Plug-in kann Flutter-Widgets über der Webansicht rendern. So ist es beispielsweise möglich, ein Drop-down-Menü über der Webansicht zu rendern.

Aufgaben

In diesem Codelab erstellen Sie Schritt für Schritt eine mobile App mit einer WebView mithilfe des Flutter SDK. Mit der Anwendung können Sie Folgendes tun:

Webinhalte in einem WebView anzeigen
Flutter-Widgets über dem WebView anzeigen
Auf Ereignisse zum Fortschritt des Seitenaufbaus reagieren
WebView über die WebViewController steuern
Websites mit NavigationDelegate blockieren
JavaScript-Ausdrücke auswerten
Callbacks aus JavaScript mit JavascriptChannels verarbeiten
Cookies setzen, entfernen, hinzufügen oder anzeigen
HTML aus Assets, Dateien oder Strings mit HTML laden und anzeigen

iPhone-Simulator mit einer Flutter-App mit eingebetteter WebView, in der die Flutter.dev-Startseite angezeigt wird

Android-Emulator, auf dem eine Flutter-App mit einer eingebetteten Webansicht ausgeführt wird, in der die Flutter.dev-Startseite angezeigt wird

Lerninhalte

In diesem Codelab erfahren Sie, wie Sie das webview_flutter-Plug-in auf verschiedene Arten verwenden können, z. B.:

webview_flutter-Plug-in konfigurieren
Ereignisse für den Fortschritt des Seitenaufbaus erfassen
Seitennavigation steuern
WebView anweisen, in der Historie vor- und zurückzugehen
JavaScript auswerten, einschließlich der Verwendung zurückgegebener Ergebnisse
Callbacks registrieren, um Dart-Code aus JavaScript aufzurufen
Cookies verwalten
HTML-Seiten aus Assets, Dateien oder einem String mit HTML laden und anzeigen

Voraussetzungen

Android Studio 4.1 oder höher (für die Android-Entwicklung)
Xcode 12 oder höher (für die iOS-Entwicklung)
Flutter SDK
Ein Codeeditor wie Android Studio oder Visual Studio Code.

2. Flutter-Entwicklungsumgebung einrichten

Für dieses Lab benötigen Sie zwei Softwarekomponenten: das Flutter SDK und einen Editor.

Sie können das Codelab auf einem der folgenden Geräte ausführen:

Ein physisches Android- oder iOS-Gerät, das mit Ihrem Computer verbunden ist und auf den Entwicklermodus eingestellt ist.
Der iOS-Simulator (erfordert die Installation von Xcode-Tools).
Android Emulator (muss in Android Studio eingerichtet werden)

3. Erste Schritte

Erste Schritte mit Flutter

Es gibt verschiedene Möglichkeiten, ein neues Flutter-Projekt zu erstellen. Sowohl Android Studio als auch Visual Studio Code bieten Tools für diese Aufgabe. Folgen Sie entweder der verlinkten Anleitung, um ein Projekt zu erstellen, oder führen Sie die folgenden Befehle in einem geeigneten Befehlszeilenterminal aus.

$ flutter create --platforms=android,ios webview_in_flutter
Creating project webview_in_flutter...
Resolving dependencies in `webview_in_flutter`...
Downloading packages...
Got dependencies in `webview_in_flutter`.
Wrote 74 files.

All done!
You can find general documentation for Flutter at: https://docs.flutter.dev/
Detailed API documentation is available at: https://api.flutter.dev/
If you prefer video documentation, consider: https://www.youtube.com/c/flutterdev

In order to run your application, type:

  $ cd webview_in_flutter
  $ flutter run

Your application code is in webview_in_flutter/lib/main.dart.

WebView Flutter-Plug-in als Abhängigkeit hinzufügen

Am besten fügen Sie einer Flutter-App zusätzliche Funktionen hinzu, indem Sie Pub-Pakete verwenden. In diesem Codelab fügen Sie Ihrem Projekt das webview_flutter-Plug-in hinzu. Führen Sie im Terminal die folgenden Befehle aus.

$ cd webview_in_flutter
$ flutter pub add webview_flutter
Resolving dependencies...
Downloading packages...
  collection 1.18.0 (1.19.0 available)
  leak_tracker 10.0.5 (10.0.7 available)
  leak_tracker_flutter_testing 3.0.5 (3.0.7 available)
  material_color_utilities 0.11.1 (0.12.0 available)
+ plugin_platform_interface 2.1.8
  string_scanner 1.2.0 (1.3.0 available)
  test_api 0.7.2 (0.7.3 available)
+ webview_flutter 4.9.0
+ webview_flutter_android 3.16.7
+ webview_flutter_platform_interface 2.10.0
+ webview_flutter_wkwebview 3.15.0
Changed 5 dependencies!
6 packages have newer versions incompatible with dependency constraints.
Try `flutter pub outdated` for more information.

Wenn Sie die Datei pubspec.yaml untersuchen, sehen Sie, dass sie jetzt eine Zeile im Abschnitt „dependencies“ für das webview_flutter-Plug-in enthält.

Android-minSDK konfigurieren

Wenn Sie das webview_flutter-Plug-in unter Android verwenden möchten, müssen Sie minSDK auf 20 festlegen. Ändern Sie die Datei android/app/build.gradle so:

android/app/build.gradle

android {
    //...

    defaultConfig {
        applicationId = "com.example.webview_in_flutter"
        minSdk = 20                                         // Modify this line
        targetSdk = flutter.targetSdkVersion
        versionCode = flutterVersionCode.toInteger()
        versionName = flutterVersionName
    }

4. WebView-Widget zur Flutter-App hinzufügen

In diesem Schritt fügen Sie Ihrer Anwendung ein WebView hinzu. WebViews sind gehostete integrierte Ansichten. Als App-Entwickler haben Sie die Möglichkeit, diese integrierten Ansichten in Ihrer App zu hosten. Unter Android können Sie zwischen virtuellen Displays (Standard für Android) und der Hybrid-Komposition wählen. Unter iOS wird jedoch immer die Hybrid-Komposition verwendet.

Eine ausführliche Erläuterung der Unterschiede zwischen virtuellen Displays und der Hybrid-Zusammensetzung finden Sie in der Dokumentation unter Hosting native Android and iOS views in your Flutter app with Platform Views .

Webview auf dem Bildschirm anzeigen

Ersetzen Sie den Inhalt von lib/main.dart durch Folgendes:

lib/main.dart

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

void main() {
  runApp(
    MaterialApp(
      theme: ThemeData(useMaterial3: true),
      home: const WebViewApp(),
    ),
  );
}

class WebViewApp extends StatefulWidget {
  const WebViewApp({super.key});

  @override
  State<WebViewApp> createState() => _WebViewAppState();
}

class _WebViewAppState extends State<WebViewApp> {
  late final WebViewController controller;

  @override
  void initState() {
    super.initState();
    controller = WebViewController()
      ..loadRequest(
        Uri.parse('https://flutter.dev'),
      );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Flutter WebView'),
      ),
      body: WebViewWidget(
        controller: controller,
      ),
    );
  }
}

Wenn Sie diesen Code auf iOS oder Android ausführen, wird eine WebView als randloses Browserfenster auf Ihrem Gerät angezeigt. Das bedeutet, dass der Browser auf Ihrem Gerät im Vollbildmodus ohne Rahmen oder Rand angezeigt wird. Beim Scrollen werden Sie feststellen, dass einige Teile der Seite etwas seltsam aussehen. Das liegt daran, dass JavaScript deaktiviert ist. Für das korrekte Rendern von flutter.dev ist JavaScript erforderlich.

App ausführen

Führen Sie die Flutter-App unter iOS oder Android aus, um eine Webansicht zu sehen, in der die Website flutter.dev angezeigt wird. Alternativ können Sie die App in einem Android-Emulator oder einem iOS-Simulator ausführen. Sie können die ursprüngliche WebView-URL durch beispielsweise Ihre eigene Website ersetzen.

$ flutter run

Wenn Sie den entsprechenden Simulator oder Emulator ausführen oder ein physisches Gerät angeschlossen haben, sollte nach dem Kompilieren und Bereitstellen der App auf Ihrem Gerät Folgendes angezeigt werden:

iPhone-Simulator mit einer Flutter-App mit eingebetteter WebView, in der die Flutter.dev-Startseite angezeigt wird

Android-Emulator, auf dem eine Flutter-App mit einer eingebetteten Webansicht ausgeführt wird, in der die Flutter.dev-Startseite angezeigt wird

5. Auf Seitenaufbau-Ereignisse warten

Das WebView-Widget bietet mehrere Ereignisse für den Fortschritt des Seitenaufbaus, auf die Ihre App reagieren kann. Während des WebView-Seitenladezyklus werden drei verschiedene Seitenladeereignisse ausgelöst: onPageStarted, onProgress und onPageFinished. In diesem Schritt implementieren Sie eine Anzeige für das Laden der Seite. Außerdem wird dadurch gezeigt, dass Sie Flutter-Inhalte über dem WebView-Inhaltsbereich rendern können.

Seitenaufbau-Ereignisse in Ihre App einfügen

Erstellen Sie eine neue Quelldatei unter lib/src/web_view_stack.dart und fügen Sie ihr folgenden Inhalt hinzu:

lib/src/web_view_stack.dart

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

class WebViewStack extends StatefulWidget {
  const WebViewStack({super.key});

  @override
  State<WebViewStack> createState() => _WebViewStackState();
}

class _WebViewStackState extends State<WebViewStack> {
  var loadingPercentage = 0;
  late final WebViewController controller;

  @override
  void initState() {
    super.initState();
    controller = WebViewController()
      ..setNavigationDelegate(NavigationDelegate(
        onPageStarted: (url) {
          setState(() {
            loadingPercentage = 0;
          });
        },
        onProgress: (progress) {
          setState(() {
            loadingPercentage = progress;
          });
        },
        onPageFinished: (url) {
          setState(() {
            loadingPercentage = 100;
          });
        },
      ))
      ..loadRequest(
        Uri.parse('https://flutter.dev'),
      );
  }

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        WebViewWidget(
          controller: controller,
        ),
        if (loadingPercentage < 100)
          LinearProgressIndicator(
            value: loadingPercentage / 100.0,
          ),
      ],
    );
  }
}

In diesem Code wird das WebView-Widget in ein Stack eingebettet und das WebView wird bedingt mit einem LinearProgressIndicator überlagert, wenn der Prozentsatz des Seitenaufbaus weniger als 100 % beträgt. Da sich der Programmstatus im Laufe der Zeit ändert, haben Sie ihn in einer State-Klasse gespeichert, die mit einem StatefulWidget verknüpft ist.

Wenn Sie dieses neue WebViewStack-Widget verwenden möchten, müssen Sie Ihre lib/main.dart so ändern:

lib/main.dart

import 'package:flutter/material.dart';

import 'src/web_view_stack.dart';

void main() {
  runApp(
    MaterialApp(
      theme: ThemeData(useMaterial3: true),
      home: const WebViewApp(),
    ),
  );
}

class WebViewApp extends StatefulWidget {
  const WebViewApp({super.key});

  @override
  State<WebViewApp> createState() => _WebViewAppState();
}

class _WebViewAppState extends State<WebViewApp> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Flutter WebView'),
      ),
      body: const WebViewStack(),
    );
  }
}

Wenn Sie die App ausführen, wird je nach Netzwerkbedingungen und je nachdem, ob der Browser die Seite, zu der Sie navigieren, im Cache gespeichert hat, eine Ladeanzeige für die Seite über dem Inhaltsbereich WebView eingeblendet.

6. Mit dem WebViewController arbeiten

Das WebView-Widget ermöglicht die programmatische Steuerung mit einer WebViewController. Dieser Controller wird nach der Erstellung des WebView-Widgets über einen Callback zur Verfügung gestellt. Aufgrund der asynchronen Verfügbarkeit dieses Controllers ist er ein hervorragender Kandidat für die asynchrone Completer<T>-Klasse von Dart.

Aktualisieren Sie lib/src/web_view_stack.dart so:

lib/src/web_view_stack.dart

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

class WebViewStack extends StatefulWidget {
  const WebViewStack({required this.controller, super.key}); // MODIFY

  final WebViewController controller;                        // ADD

  @override
  State<WebViewStack> createState() => _WebViewStackState();
}

class _WebViewStackState extends State<WebViewStack> {
  var loadingPercentage = 0;
  // REMOVE the controller that was here

  @override
  void initState() {
    super.initState();
    // Modify from here...
    widget.controller.setNavigationDelegate(
      NavigationDelegate(
        onPageStarted: (url) {
          setState(() {
            loadingPercentage = 0;
          });
        },
        onProgress: (progress) {
          setState(() {
            loadingPercentage = progress;
          });
        },
        onPageFinished: (url) {
          setState(() {
            loadingPercentage = 100;
          });
        },
      ),
    );
    // ...to here.
  }

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        WebViewWidget(
          controller: widget.controller,                     // MODIFY
        ),
        if (loadingPercentage < 100)
          LinearProgressIndicator(
            value: loadingPercentage / 100.0,
          ),
      ],
    );
  }
}

Das WebViewStack-Widget verwendet jetzt einen Controller, der im umgebenden Widget erstellt wurde. Dadurch kann der Controller für WebViewWidget mit anderen Teilen der App geteilt werden.

Ein funktionierendes WebView ist eine Sache, aber die Möglichkeit, vorwärts und rückwärts durch den Seitenverlauf zu navigieren und die Seite neu zu laden, wäre eine nützliche Ergänzung. Mit einem WebViewController können Sie diese Funktion in Ihre App einfügen.

Erstellen Sie eine neue Quelldatei unter lib/src/navigation_controls.dart und fügen Sie Folgendes ein:

lib/src/navigation_controls.dart

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

class NavigationControls extends StatelessWidget {
  const NavigationControls({required this.controller, super.key});

  final WebViewController controller;

  @override
  Widget build(BuildContext context) {
    return Row(
      children: <Widget>[
        IconButton(
          icon: const Icon(Icons.arrow_back_ios),
          onPressed: () async {
            final messenger = ScaffoldMessenger.of(context);
            if (await controller.canGoBack()) {
              await controller.goBack();
            } else {
              messenger.showSnackBar(
                const SnackBar(content: Text('No back history item')),
              );
              return;
            }
          },
        ),
        IconButton(
          icon: const Icon(Icons.arrow_forward_ios),
          onPressed: () async {
            final messenger = ScaffoldMessenger.of(context);
            if (await controller.canGoForward()) {
              await controller.goForward();
            } else {
              messenger.showSnackBar(
                const SnackBar(content: Text('No forward history item')),
              );
              return;
            }
          },
        ),
        IconButton(
          icon: const Icon(Icons.replay),
          onPressed: () {
            controller.reload();
          },
        ),
      ],
    );
  }
}

Dieses Widget verwendet das WebViewController, das ihm bei der Erstellung zugewiesen wurde, damit der Nutzer das WebView über eine Reihe von IconButtons steuern kann.

Mit der aktualisierten WebViewStack und der neu erstellten NavigationControls ist es jetzt an der Zeit, alles in einer aktualisierten WebViewApp zusammenzufügen. Hier erstellen wir das freigegebene WebViewController. Da sich WebViewApp in dieser App oben im Widget-Baum befindet, ist es sinnvoll, es auf dieser Ebene zu erstellen.

Aktualisieren Sie die Datei lib/main.dart so:

lib/main.dart

import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';  // ADD

import 'src/navigation_controls.dart';                  // ADD
import 'src/web_view_stack.dart';

void main() {
  runApp(
    MaterialApp(
      theme: ThemeData(useMaterial3: true),
      home: const WebViewApp(),
    ),
  );
}

class WebViewApp extends StatefulWidget {
  const WebViewApp({super.key});

  @override
  State<WebViewApp> createState() => _WebViewAppState();
}

class _WebViewAppState extends State<WebViewApp> {
  // Add from here...
  late final WebViewController controller;

  @override
  void initState() {
    super.initState();
    controller = WebViewController()
      ..loadRequest(
        Uri.parse('https://flutter.dev'),
      );
  }
  // ...to here.

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Flutter WebView'),
        // Add from here...
        actions: [
          NavigationControls(controller: controller),
        ],
        // ...to here.
      ),
      body: WebViewStack(controller: controller),       // MODIFY
    );
  }
}

Beim Ausführen der App sollte eine Webseite mit Steuerelementen angezeigt werden:

iPhone-Simulator mit einer Flutter-App mit eingebetteter WebView, in der die Flutter.dev-Startseite mit Steuerelementen für die vorherige Seite, die nächste Seite und das Aktualisieren der Seite angezeigt wird

Android-Emulator mit einer Flutter-App mit eingebetteter WebView, in der die Flutter.dev-Startseite mit Steuerelementen für die vorherige Seite, die nächste Seite und das Aktualisieren der Seite angezeigt wird

7. Navigation mit NavigationDelegate im Blick behalten

WebView stellt Ihrer App einen NavigationDelegate, zur Verfügung, mit dem Ihre App die Seitennavigation des WebView-Widgets verfolgen und steuern kann. Wenn eine Navigation von WebView, initiiert wird, z. B. wenn ein Nutzer auf einen Link klickt, wird NavigationDelegate aufgerufen. Mit dem NavigationDelegate-Callback kann gesteuert werden, ob WebView mit der Navigation fortfährt.

Benutzerdefinierten NavigationDelegate registrieren

In diesem Schritt registrieren Sie einen NavigationDelegate-Callback, um die Navigation zu YouTube.com zu blockieren. Beachten Sie, dass diese einfache Implementierung auch Inline-YouTube-Inhalte blockiert, die auf verschiedenen Flutter-API-Dokumentationsseiten angezeigt werden.

Aktualisieren Sie lib/src/web_view_stack.dart so:

lib/src/web_view_stack.dart

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

class WebViewStack extends StatefulWidget {
  const WebViewStack({required this.controller, super.key});

  final WebViewController controller;

  @override
  State<WebViewStack> createState() => _WebViewStackState();
}

class _WebViewStackState extends State<WebViewStack> {
  var loadingPercentage = 0;

  @override
  void initState() {
    super.initState();
    widget.controller.setNavigationDelegate(
      NavigationDelegate(
        onPageStarted: (url) {
          setState(() {
            loadingPercentage = 0;
          });
        },
        onProgress: (progress) {
          setState(() {
            loadingPercentage = progress;
          });
        },
        onPageFinished: (url) {
          setState(() {
            loadingPercentage = 100;
          });
        },
        // Add from here...
        onNavigationRequest: (navigation) {
          final host = Uri.parse(navigation.url).host;
          if (host.contains('youtube.com')) {
            ScaffoldMessenger.of(context).showSnackBar(
              SnackBar(
                content: Text(
                  'Blocking navigation to $host',
                ),
              ),
            );
            return NavigationDecision.prevent;
          }
          return NavigationDecision.navigate;
        },
        // ...to here.
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        WebViewWidget(
          controller: widget.controller,
        ),
        if (loadingPercentage < 100)
          LinearProgressIndicator(
            value: loadingPercentage / 100.0,
          ),
      ],
    );
  }
}

Im nächsten Schritt fügen Sie einen Menüpunkt hinzu, mit dem Sie Ihr NavigationDelegate mithilfe der Klasse WebViewController testen können. Es bleibt dem Leser überlassen, die Logik des Rückrufs so zu erweitern, dass die Navigation auf YouTube.com nur für die gesamte Seite blockiert wird und Inline-YouTube-Inhalte in der API-Dokumentation weiterhin zulässig sind.

8. Menüschaltfläche zur App-Leiste hinzufügen

In den nächsten Schritten erstellen Sie eine Menüschaltfläche im AppBar-Widget, mit der JavaScript ausgewertet, JavaScript-Channels aufgerufen und Cookies verwaltet werden. Insgesamt ein wirklich nützliches Menü.

Erstellen Sie eine neue Quelldatei unter lib/src/menu.dart und fügen Sie Folgendes ein:

WebView zur Flutter-App hinzufügen

1. Einführung

Aufgaben

Lerninhalte

Voraussetzungen

2. Flutter-Entwicklungsumgebung einrichten

3. Erste Schritte

Erste Schritte mit Flutter

WebView Flutter-Plug-in als Abhängigkeit hinzufügen

Android-minSDK konfigurieren

4. WebView-Widget zur Flutter-App hinzufügen

Webview auf dem Bildschirm anzeigen

App ausführen

5. Auf Seitenaufbau-Ereignisse warten

Seitenaufbau-Ereignisse in Ihre App einfügen

6. Mit dem WebViewController arbeiten

Über das WebView-Widget auf den WebViewController zugreifen

Navigationssteuerelemente erstellen

Navigationssteuerelemente zur App-Leiste hinzufügen

7. Navigation mit NavigationDelegate im Blick behalten

Benutzerdefinierten NavigationDelegate registrieren

8. Menüschaltfläche zur App-Leiste hinzufügen

9. JavaScript auswerten

10. Mit JavaScript-Channels arbeiten

11. Cookies verwalten

Liste aller Cookies abrufen

Alle Cookies löschen

Cookie hinzufügen

Cookie mit CookieManager setzen

Cookie entfernen

CookieManager-Menüelemente hinzufügen

CookieManager verwenden

12. Flutter-Assets, -Dateien und -HTML-Strings in der WebView laden

Flutter-Asset laden

Lokale Datei laden

HTML-String laden

Speisen und Getränke auf der Speisekarte hinzufügen

13. Fertig!