Comment mettre en place un webview en Flutter basique de A à Z.

TABLE DES MATIERES

1. Petite définition
2. Création du projet
3. Installer le plugin : flutter_webview_plugin: ^0.3.5 dans le pubspec.yaml
4. Ecrire du code dans le fichier main.dart
5. Erreur courante
6. Résolution de l’erreur
7. Exécution du script

1 — Petite définition

Un webview est un conteneur web, il permet à votre application de récupérer le contenu d’une page web.

2 — Créer un projet

flutter create webview_app

3 — Installer le plugin : flutter_webview_plugin: ^0.3.5 dans le pubspec.yaml

4 — Ecrire du code dans le fichier main.dart

On utilisera ici le widget webviewScaffold tout en lui passant notre variable selectedUrl.

5 — Erreur courante

Il peut arriver que vous ayez cette erreur : net::ERR_CLEARTEXT_NOT_PERMITTED.

6 — Résolution de l’erreur

Pour régler cette erreur ajouter ce script dans le fichier :

chemin d’accès : android/app/src/main/AndroidManifest.xml

script : android:usesCleartextTraffic="true"

— avant :

<application
    android:name="io.flutter.app.FlutterApplication"
    android:label="tangerine_ui"
    android:icon="@mipmap/ic_launcher">

— Après

<application
    android:name="io.flutter.app.FlutterApplication"
    android:label="tangerine_ui"
    android:icon="@mipmap/ic_launcher"
    android:usesCleartextTraffic="true">

Exemple

Exécution du script

Flutter run

Flutter côte d’ivoire vous remercie d’avoir suivi ce tutoriel, nous espérons que cela vous ait aider et nous vous invitons à nous suivre.

Page facebook Flutter Côte d’Ivoire : http://evassmat.com/DbP5