Les liens WEB et Flutter

Mettre des liens WEB dans un projet Flutter

À partager sans modération

Mettre des liens hypertexte dans une application Flutter c’est possible ?

Oui et nous allons voir ensemble comment s’y prendre.

Avant de commencer il te faut déjà les bases sur Flutter.

Si tu ne les as pas, aucun soucis, un cours d’initiation gratuit est disponible ici.

[wbcr_js_snippet id= »174″]

Ensuite, on va commencer par le package qui va nous permettre d’exécuter des liens.

Tu trouveras le package ici, il se nomme url_launcher.

Pour l’installer il te faut créer ou reprendre un projet Flutter.

Dans l’onglet « Installing » tu auras la ligne suivante.

dependencies:   

url_launcher: ^5.2.7

[wbcr_js_snippet id= »174″]

Tu dois copier-coller la partie url_launcher: ^5.2.7 dans le pubspec.yaml de ton projet comme ci-dessous.

dependencies:
  flutter:
    sdk: flutter

  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^0.1.2
  url_launcher: ^5.2.7

Ensuite on développe notre main.dart à partir de zéro.

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

void main() => runApp(UrlApp());

class UrlApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "UrlApp",
      home: Home(),
    );
  }
}

Ci-dessus on a créé notre void main() qui lance notre application avec runApp(), ce runApp lance une classe UrlApp avec un MaterialApp et enfin cette classe lance une autre classe Home qui contient notre screen.

Après dans le même fichier (le code est court) on va ajouter la classe Home qui sera un StatelessWidget.

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("The Url App"),
      ),
      body: Center(
        child: FlatButton(
          onPressed: _launchLink,
          child: Text("Lancez moi !"),
        ),
      ),
    );
  }

[wbcr_js_snippet id= »174″]

Ici on retourne un Scaffold qui va générer la structure de notre screen, on lui donne une AppBar surtout pour l’esthétique.

On lui donne ensuite du contenu avec son paramètre body, le widget FlatButton est utilisé dans cette exemple, il permet de créer un bouton plat. On finit cette partie par passer une fonction _launchLink au paramètre onPressed, cette fonction va s’occuper du lancement du lien quand on clic sur le bouton et de la gestion des erreurs.

  void _launchLink() async {
    const url = "https://learn.inmanencia.org";

    if (await canLaunch(url)) {
      await launch(url);
    } else {
      throw "Impossible de lancer le lien.";
    }
  }
}

Pour finir on créé la fonction privée _launchLink() qui est asynchrone (exécution dans le temps et non instantané).

Avec await canLaunch(url), on verifie grâce au package url_launcher que notre lien est bien construit pour éviter tout problème, le mot clé await stoppe l’execution de la fonction _launchLink() et attend le résultat de la fonction canLaunch(), la fonction retournera un bool donc true ou false et cette réponse servira la condition if().

Si le lien est correct alors le code await launch(url) est lancé ce qui va démarrer le navigateur mobile.

Sinon on arrête l’exécution de l’application en envoyant un message d’erreur avec le mot clé throw et « Impossible de lancer le lien. »

Et c’est tout !

Les liens WEB et Flutter