Webview dans Flutter

Flutter, nouveau SDK proposé par Google pour créer des applications Android et iOS avec une seule base de code en Dart, permet d’utiliser des Webviews comme dans les langages natifs Kotlin et Swift. Une Webview, c’est tout simplement l’une des composantes incontournables qui permet d’afficher du contenu web, comme des pages URL ou directement du code HTML et CSS.

Sous Flutter, on utilise souvent ce qu’on appelle des library ou package. Pour créer des Webviews, nous allons devoir en utiliser. On remarque qu’il en existe un nombre important si l’on tape notre mot clé dans https://pub.dartlang.org/packages. Dans mon exemple, j’ai utilisé flutter_webview_plugin 0.3.0+2 mis à jour récemment et développé par Fluttercommunity. On peut aussi utiliser le package officiel juste ici.

Nous ne sommes pas obligés d’utiliser ce plugin dans notre application, mais il faut reconnaître qu’une Webview peut avoir des avantages. Elle peut nous faire gagner du temps sur certaines vues, mais elle est surtout très simple d’utilisation. La Webview a aussi des inconvénients, comme posséder obligatoirement une connexion internet (sauf si c’est du texte HTML embarqué dans votre projet). Néanmoins, la plupart du temps, on utilise une URL, et même si en 2019 la majorité des smartphones disposent d’une connexion, la coupure de réseau ou la zone mal desservie existent encore. Bref, avançons sur le sujet.

Webview dans Flutter avec URL

Nous allons d’abord voir comment utiliser les Webviews dans Flutter en appelant des URL à distance. Il faut donc obligatoirement avoir une connexion internet.

Dans un premier temps, allez vérifier que les permissions internet sont bien mises en place dans votre projet. Normalement, elles sont activées par défaut.
Ensuite, ajoutez le package dans votre fichier pubspecs.yaml et faîtes un get package.

1	flutter_webview_plugin: ^0.3.0+2

Maintenant que vous avez ajouté les permissions internet et la library qui va nous servir pour nos tests, vous n’avez plus qu’à créer une simple vue dans votre main.dart.
Vous pouvez copier-coller le code ci dessous pour créer un page Webview qui appelle une URL avec une Appbar.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

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

void main() => runApp(MaterialApp(home: MyApp()));

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: "hmwkapp",
debugShowCheckedModeBanner: false,
home: new MyHomePage(),
);
}
}

class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

@override
Widget build(BuildContext context) {
return WebviewScaffold(
appBar: AppBar(
title: const Text('hmwkapp'),
),
url: "https://homework.family",
);
}
}

On remarque dans mon exemple que l’icone Menu en haut n’est pas top. Imaginons que votre but est d’afficher rapidement une page de contact ou d’informations comme les CGU, ce n’est pas très joli ni pratique pour la navigation dans l’application mobile d’avoir un menu web qui s’affiche.

Nous pouvons donc simplement le supprimer en injectant du code javascript dans notre webview flutter.
Le plugin utilisé nous permet de détecter la fin de chargement de la vue pour injecter à ce moment là le javascript.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

import 'dart:async';
final flutterWebViewPlugin = FlutterWebviewPlugin();

StreamSubscription<String> _onUrlChanged;

@override
void initState() {
super.initState();

flutterWebViewPlugin.close();

_onUrlChanged = flutterWebViewPlugin.onUrlChanged.listen((String url) {
if (mounted) {
setState(() {
flutterWebViewPlugin.evalJavascript("document.querySelector('#menu_slide_xs').remove();");
});
}
});
}

@override
void dispose() {
_onUrlChanged.cancel();
flutterWebViewPlugin.dispose();
super.dispose();
}

Webview dans Flutter avec html

Dans cette deuxième partie, nous allons voir qu’il est aussi possible d’intégrer directement de l’HTML et du CSS dans les Webviews dans Flutter. La logique reste la même, cette fois-ci on va utiliser url: new Uri.dataFromString.

Pour l’instant le package ne permet pas d’appeler directement un fichier .html. J’ai donc essayé de créer un fichier dans le projet, et de le lier aux “assets” comme une image, mais impossible de le faire reconnaître dans mon main.dart. J’espère que la library permettra de le faire prochainement, je mettrai alors à jour cet article.

Vous pouvez directement copier ce code pour le tester dans votre projet.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

Comment utiliser les Webviews dans Flutter ?

Voilà, je pense qu’on a fait le tour sur les webviews dans flutter. Ce widget reste simple à utiliser, mais moins pratique pour l’utilisateur final qui téléchargera votre application mobile. Vous pouvez créer un menu drawer sur la gauche et faire des pages qui amènent vers vos webviews. Voici donc comment créer rapidement une petite application “vitrine”.

VOUS EN VOULEZ ENCORE ?

CHANGER D'UNIVERS !

Archives Vidéos

The Blog

L’instagrume

Application Mobile |