Questa pagina è stata tradotta dall'API Cloud Translation.

Aggiungere WebView all'app Flutter

1. Introduzione

Ultimo aggiornamento: 19/10/2021

Con il plug-in WebView Flutter puoi aggiungere un widget WebView alla tua app Flutter per Android o iOS. Su iOS, il widget WebView è supportato da WKWebView, mentre su Android è supportato da WebView. Il plug-in può eseguire il rendering dei widget Flutter sulla visualizzazione web. Ad esempio, è possibile visualizzare un menu a discesa sopra la visualizzazione web.

Cosa creerai

In questo codelab, creerai passo passo un'app mobile con una WebView utilizzando l'SDK Flutter. La tua app sarà in grado di:

Visualizzare contenuti web in un WebView
Visualizza i widget Flutter impilati sopra WebView
Reagire agli eventi di avanzamento del caricamento della pagina
Controlla WebView tramite WebViewController
Bloccare i siti web utilizzando NavigationDelegate
Valutare le espressioni JavaScript
Gestire i callback da JavaScript con JavascriptChannels
Impostare, rimuovere, aggiungere o mostrare i cookie
Caricare e visualizzare HTML da asset, file o stringhe contenenti HTML

Simulatore di iPhone che esegue un'app Flutter con una WebView incorporata che mostra la home page di Flutter.dev

Emulatore Android che esegue un'app Flutter con una WebView incorporata che mostra la home page di Flutter.dev

Cosa imparerai

In questo codelab imparerai a utilizzare il webview_flutter plug-in in vari modi, tra cui:

Come configurare il plug-in webview_flutter
Come rilevare gli eventi di avanzamento del caricamento della pagina
Come controllare la navigazione nelle pagine
Come comandare a WebView di andare avanti e indietro nella cronologia
Come valutare JavaScript, incluso l'utilizzo dei risultati restituiti
Come registrare i callback per chiamare il codice Dart da JavaScript
Come gestire i cookie
Come caricare e visualizzare pagine HTML da asset, file o stringhe contenenti HTML

Requisiti

Android Studio 4.1 o versioni successive (per lo sviluppo Android)
Xcode 12 o versioni successive (per lo sviluppo di iOS)
SDK Flutter
Un editor di codice, ad esempio Android Studio o Visual Studio Code.

2. Configura l'ambiente di sviluppo Flutter

Per completare questo lab, hai bisogno di due software: l'SDK Flutter e un editor.

Puoi eseguire il codelab utilizzando uno qualsiasi di questi dispositivi:

Un dispositivo fisico Android o iOS connesso al computer e impostato sulla modalità sviluppatore.
Il simulatore iOS (richiede l'installazione degli strumenti Xcode).
L'emulatore Android (richiede la configurazione in Android Studio).

3. Per iniziare

Introduzione a Flutter

Esistono diversi modi per creare un nuovo progetto Flutter. Sia Android Studio che Visual Studio Code forniscono strumenti per questa attività. Segui le procedure collegate per creare un progetto oppure esegui i seguenti comandi in un terminale a riga di comando pratico.

$ 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.

Aggiungere il plug-in WebView Flutter come dipendenza

L'aggiunta di funzionalità aggiuntive a un'app Flutter si ottiene al meglio utilizzando i pacchetti Pub. In questo codelab aggiungerai il plug-in webview_flutter al tuo progetto. Esegui questi comandi nel terminale.

$ 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.

Se esamini il file pubspec.yaml, vedrai che ora contiene una riga nella sezione delle dipendenze per il plug-in webview_flutter.

Configurare minSDK Android

Per utilizzare il plug-in webview_flutter su Android, devi impostare minSDK su 20. Modifica il file android/app/build.gradle come segue:

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. Aggiunta del widget WebView all'app Flutter

In questo passaggio aggiungerai un WebView alla tua applicazione. Le WebView sono viste integrate ospitate e, in qualità di sviluppatore di app, puoi scegliere come ospitare queste viste integrate nella tua app. Su Android puoi scegliere tra display virtuali, l'impostazione predefinita per Android, e composizione ibrida. Tuttavia, iOS utilizza sempre la composizione ibrida.

Per una discussione approfondita sulle differenze tra display virtuali e composizione ibrida, leggi la documentazione su Hosting di visualizzazioni native di Android e iOS nella tua app Flutter con Platform Views .

Inserimento di una WebView sullo schermo

Sostituisci i contenuti di lib/main.dart come segue:

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,
      ),
    );
  }
}

Se lo esegui su iOS o Android, sul tuo dispositivo verrà visualizzata una WebView come finestra del browser a tutta pagina, il che significa che il browser viene visualizzato sul tuo dispositivo a schermo intero senza bordi o margini. Man mano che scorri, noterai parti della pagina che potrebbero sembrare un po' strane. Questo perché JavaScript è disattivato e il rendering corretto di flutter.dev richiede JavaScript.

Esecuzione dell'app

Esegui l'app Flutter in iOS o Android per visualizzare una WebView, che mostra il sito web flutter.dev. In alternativa, esegui l'app in un emulatore Android o in un simulatore iOS. Puoi sostituire l'URL iniziale di WebView con, ad esempio, il tuo sito web.

$ flutter run

Supponendo che sia in esecuzione il simulatore o l'emulatore appropriato o che sia collegato un dispositivo fisico, dopo aver compilato e distribuito l'app sul dispositivo, dovresti visualizzare un risultato simile al seguente:

Simulatore di iPhone che esegue un'app Flutter con una WebView incorporata che mostra la home page di Flutter.dev

Emulatore Android che esegue un'app Flutter con una WebView incorporata che mostra la home page di Flutter.dev

5. In ascolto di eventi di caricamento pagina

Il widget WebView fornisce diversi eventi di avanzamento del caricamento della pagina, che la tua app può ascoltare. Durante il ciclo di caricamento della pagina WebView vengono attivati tre diversi eventi di caricamento della pagina: onPageStarted, onProgress e onPageFinished. In questo passaggio implementerai un indicatore di caricamento della pagina. Inoltre, dimostrerai di poter eseguire il rendering dei contenuti Flutter nell'area dei contenuti WebView.

Aggiungere eventi di caricamento pagina all'app

Crea un nuovo file di origine in lib/src/web_view_stack.dart e inserisci i seguenti contenuti:

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,
          ),
      ],
    );
  }
}

Questo codice ha racchiuso il widget WebView in un Stack, sovrapponendo in modo condizionale il WebView con un LinearProgressIndicator quando la percentuale di caricamento della pagina è inferiore al 100%. Poiché ciò comporta uno stato del programma che cambia nel tempo, hai memorizzato questo stato in una classe State associata a un StatefulWidget.

Per utilizzare questo nuovo widget WebViewStack, modifica lib/main.dart come segue:

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(),
    );
  }
}

Quando esegui l'app, a seconda delle condizioni di rete e se il browser ha memorizzato nella cache la pagina a cui stai navigando, vedrai un indicatore di caricamento della pagina sovrapposto all'area dei contenuti WebView.

6. Utilizzo di WebViewController

Il widget WebView consente il controllo programmatico con un WebViewController. Questo controller viene reso disponibile dopo la costruzione del widget WebView tramite un callback. La natura asincrona della disponibilità di questo controller lo rende un candidato ideale per la classe asincrona Completer<T> di Dart.

Aggiorna lib/src/web_view_stack.dart come segue:

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,
          ),
      ],
    );
  }
}

Il widget WebViewStack ora utilizza un controller creato nel widget circostante. In questo modo, il controller per WebViewWidget potrà essere condiviso con altre parti dell'app.

Avere un WebView funzionante è una cosa, ma poter navigare avanti e indietro nella cronologia delle pagine e ricaricare la pagina sarebbe un insieme utile di aggiunte. Fortunatamente, con un WebViewController puoi aggiungere questa funzionalità alla tua app.

Crea un nuovo file di origine in lib/src/navigation_controls.dart e inserisci quanto segue:

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();
          },
        ),
      ],
    );
  }
}

Questo widget utilizza il WebViewController condiviso al momento della creazione per consentire all'utente di controllare WebView tramite una serie di IconButton.

Con l'WebViewStack aggiornato e il nuovo NavigationControls in mano, è ora di mettere tutto insieme in un WebViewApp aggiornato. Qui costruiamo il WebViewController condiviso. Con WebViewApp vicino alla parte superiore dell'albero dei widget in questa app, è logico crearlo a questo livello.

Aggiorna il file lib/main.dart come segue:

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
    );
  }
}

L'esecuzione dell'app dovrebbe mostrare una pagina web con i controlli:

Simulatore di iPhone che esegue un'app Flutter con una webview incorporata che mostra la home page di Flutter.dev con i controlli per la pagina precedente, la pagina successiva e il ricaricamento della pagina

Emulatore Android che esegue un'app Flutter con una webview incorporata che mostra la home page di Flutter.dev con i controlli per la pagina precedente, la pagina successiva e il ricaricamento della pagina

7. Monitorare la navigazione con NavigationDelegate

WebView fornisce alla tua app un NavigationDelegate, che le consente di monitorare e controllare la navigazione delle pagine del widget WebView. Quando una navigazione viene avviata da WebView,, ad esempio quando un utente fa clic su un link, viene chiamato NavigationDelegate. Il callback NavigationDelegate può essere utilizzato per controllare se WebView procede con la navigazione.

Registra un NavigationDelegate personalizzato

In questo passaggio, registrerai un callback NavigationDelegate per bloccare la navigazione su YouTube.com. Tieni presente che questa implementazione semplificata blocca anche i contenuti YouTube incorporati, che vengono visualizzati in varie pagine della documentazione dell'API Flutter.

Aggiorna lib/src/web_view_stack.dart come segue:

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,
          ),
      ],
    );
  }
}

Nel passaggio successivo, aggiungerai una voce di menu per attivare il test di NavigationDelegate utilizzando la classe WebViewController. Il lettore è invitato a migliorare la logica del callback per bloccare solo la navigazione a schermo intero su YouTube.com e consentire comunque i contenuti di YouTube incorporati nella documentazione dell'API.

8. Aggiunta di un pulsante di menu alla barra delle app

Nei passaggi successivi, creerai un pulsante del menu nel widget AppBar utilizzato per valutare JavaScript, richiamare i canali JavaScript e gestire i cookie. Nel complesso, un menu davvero utile.

Crea un nuovo file di origine in lib/src/menu.dart e inserisci quanto segue:

Aggiungere WebView all'app Flutter

1. Introduzione

Cosa creerai

Cosa imparerai

Requisiti

2. Configura l'ambiente di sviluppo Flutter

3. Per iniziare

Introduzione a Flutter

Aggiungere il plug-in WebView Flutter come dipendenza

Configurare minSDK Android

4. Aggiunta del widget WebView all'app Flutter

Inserimento di una WebView sullo schermo

Esecuzione dell'app

5. In ascolto di eventi di caricamento pagina

Aggiungere eventi di caricamento pagina all'app

6. Utilizzo di WebViewController

Accesso a WebViewController dal widget WebView

Creare controlli di navigazione

Aggiunta di controlli di navigazione alla barra delle app

7. Monitorare la navigazione con NavigationDelegate

Registra un NavigationDelegate personalizzato

8. Aggiunta di un pulsante di menu alla barra delle app

9. Valutazione di JavaScript

10. Utilizzo dei canali JavaScript

11. Gestione dei cookie

Visualizzare un elenco di tutti i cookie

Cancella tutti i cookie

Aggiungere un cookie

Impostazione di un cookie con CookieManager

Rimuovere un cookie

Aggiunta delle voci di menu di CookieManager

Utilizzo di CookieManager

12. Caricare asset, file e stringhe HTML di Flutter in WebView

Caricare l'asset Flutter

Carica file locale

Carica stringa HTML

Aggiungere le voci di menu

13. Operazione completata.