Tuto Flutter Url Launcher: Ouvrir des pages web, SMS, mails et fichiers avec Flutter

Bonjour à tous et bienvenue dans ce tutoriel Flutter URL launcher!

Nous allons prendre en main le package url_launcher de Flutter pour ouvrir toutes sortes de liens depuis nos applications.

Ce package permet en effet d’ouvrir des pages web, mais également d’envoyer un email à une adresse donnée, un SMS ou passer un appel.

Nous allons créer une petite application très simple pour tester toutes les fonctionnalités de ce package:

Pour réaliser cette application, nous allons suivre les étapes suivantes:

Installation du package url_launcher
Ouvrir différents types de liens
Configuration avancée

Vous pouvez également accéder au code source de l’application via GitHub.

1. Installation du package url_launcher

On commence le tuto avec l'installation du package et un exemple vraiment basique.

Vous pouvez accéder au package depuis la page suivante: https://pub.dev/packages/url_launcher

Ajoutez également sa dépendance dans votre fichier YAML:

url_launcher: ^6.0.20

Une fois la dépendance ajoutée, n'oubliez d'exécuter la commande suivante pour télécharger le package dans votre application:

flutter pub get

Vous pouvez ensuite importer le package dans votre fichier Dart:

import 'package:url_launcher/url_launcher.dart';

On reprend ensuite l'exemple de la documentation avec une première fonction pour ouvrir le site web de Flutter.

Pour cela, on déclare l'url de notre site dans une variable locale, puis on déclarer la fonction _launchURL:

const String _url = 'https://flutter.dev';

void _launchURL() async {
  if (!await launch(_url)) throw 'Could not launch $_url';
}

Cette fonction asynchrone reprend la méthode launch() issue de notre package qui nous permet de lancer notre navigateur.

Dans le cas où on rencontre un problème, on renvoie tout simplement un petit message d'erreur.

Vous pouvez alors associer cette fonction à un simple bouton que vous affichez dans le centre de notre écran:

void main() => runApp(
      const MaterialApp(
        debugShowCheckedModeBanner: false,
        home: Material(
          child: Center(
            child: ElevatedButton(
              onPressed: _launchURL,
              child: Text('Show Flutter homepage'),
            ),
          ),
        ),
      ),
    );

Lorsque vous cliquez sur le bouton, le lien du site web de Flutter devrait donc s'ouvrir dans votre navigateur.

Sur iOS, par défaut le lien s'ouvrira dans le navigateur intégré, alors que sur Android il s'ouvrira avec Google Chrome.

Nous verrons comment personnaliser ces paramètres d'ouverture à la fin du tuto, juste avant nous allons voir les différents types de liens à ouvrir.

2. Ouvrir différents types de liens

On passe maintenant à la deuxième partie de notre tutoriel, pour manipuler différents types de liens à ouvrir.

Le package url_launcher permet en effet d'ouvrir plusieurs types de lien, comme des emails ou des numéros de téléphone.

Pour compléter ce tuto, j'aurais besoin d'un deuxième package pour accéder à des icônes complémentaires.

J'utilisera la bibliothèque open source Font Awesome pour afficher des icônes de marques: https://fontawesome.com/icons

Ainsi que le package correspondant pour accéder aux widgets Font Awesome: https://pub.dev/packages/font_awesome_flutter

Vous pouvez donc ajouter la dépendance de ce package dans votre fichier YAML:

url_launcher: ^6.0.20
font_awesome_flutter: ^10.1.0

Au niveau de l'organisation des fichiers, j'en ajoute un nouveau pour stocker les informations de mes différents sites:

├── lib
│   ├── data.dart
│   └── main.dart
└── pubspec.yaml

Dans ce nouveau fichier data.dart, j'importer les packages Material et Font Awesome pour créer une liste personnalisée.

J'appelle cette liste data qui contient différents objets pour chacun de mes sites ou liens à ouvrir.

Pour chaque lien, je propose un nom à afficher, une adresse URL ainsi qu'une icône et une couleur associée:

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

List data = [
  {
    "name": "Email",
    "url": "mailto:contact@drissas.com",
    "icon": FontAwesomeIcons.at,
    "color": Colors.black,
  },
  {
    "name": "Phone",
    "url": "tel:+1-555-010-999",
    "icon": FontAwesomeIcons.phone,
    "color": Colors.red,
  },
  {
    "name": "SMS",
    "url": "sms:5550101234",
    "icon": FontAwesomeIcons.commentSms,
    "color": Colors.green,
  },
  {
    "name": "GitHub",
    "url": "https://GitHub.com",
    "icon": FontAwesomeIcons.github,
    "color": Colors.black,
  },
  {
    "name": "Google",
    "url": "https://google.com",
    "icon": FontAwesomeIcons.google,
    "color": Colors.redAccent,
  },
];

Depuis notre fichier main.dart, nous pouvons alors importer cette liste de données ainsi que les packages complémentaires:

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

void main() {
  runApp(const MyApp());
}

On peut alors parcourir notre liste data et renvoyer pour chaque élément une ListTile avec les informations de notre lien.

On affiche alors le nom du lien, son adresse ainsi que l'icône de la couleur correspondante:

ListView(
  children: data.map((item) {
    return Card(
      child: ListTile(
        onTap: () => _launchURL(item['url']),
        leading: CircleAvatar(
          backgroundColor: Colors.grey.shade100,
          child: FaIcon(
            item['icon'],
            color: item['color'],
            size: 25,
          ),
        ),
        title: Text(
          item['name'],
          style: const TextStyle(
            fontWeight: FontWeight.bold,
            fontSize: 20,
          ),
        ),
        subtitle: Text(item['url']),
        trailing: IconButton(
          icon: const Icon(Icons.arrow_forward),
          onPressed: () => _launchURL(item['url']),
        ),
      ),
    );
  }).toList(),
)

On doit également rendre notre liste cliquable avec le champ onTap de notre ListTile, que l'on associe à la fonction _launchURL.

La fonction _launchURL que nous déclarons plus haut prend également en paramètre l'adresse URL de notre lien, pour rendre la fonction dynamique:

void _launchURL(String _url) async {
  if (!await launch(_url)) throw 'Could not launch $_url';
}

De cette manière, vous devriez pouvoir cliquer sur les différents liens affichés et les ouvrir dans le navigateur.

Pour les liens de types SMS, téléphone et email, l'interface dépend d'iOS et d'Android pour ouvrir l'application correspondante.

On passe maintenant aux derniers paramètres possibles à ajouter à notre package url_launcher.

3. Configuration avancée

On termine avec les derniers paramètres à ajouter à votre application pour exploiter 100% du package url_launcher.

Pour commencer, je vous propose de revenir sur la configuration d'iOS et d'Android pour faire fonctionner les liens sur les deux OS.

Pour iOS, vous pouvez vous rendre dans le fichier de configuration info.plist:

ios/Runner/Info.plist

Ajoutez ensuite le paramètre LSApplicationQueriesSchemes avec tous les types de liens que vous souhaitez proposer:

<key>LSApplicationQueriesSchemes</key>
<array>
  <string>https</string>
  <string>http</string>
  <string>mailto</string>
  <string>tel</string>
  <string>sms</string>
  <string>file</string>
</array>

J'ai par exemple ajouté le type file pour ouvrir un fichier particulier dans votre smartphone, une photo ou un PDF par exemple.

En fonction de la plateforme que vous ciblez, vous pourrez également ouvrir des fichiers avec ce package et aller plus loin encore.

Pour la configuration Android, elle passe par le fichier AndroidManifest.XML à l'adresse suivante:

android/app/src/main/AndroidManifest.xml

Vous pouvez alors préciser à nouveaux tous les types de liens à ouvrir et ainsi les autoriser sur Android:

<queries>
  <!-- If your app opens https URLs -->
  <intent>
    <action android:name="android.intent.action.VIEW" />
    <data android:scheme="https" />
  </intent>
  <!-- If your app makes calls -->
  <intent>
    <action android:name="android.intent.action.DIAL" />
    <data android:scheme="tel" />
  </intent>
  <!-- If your sends SMS messages -->
  <intent>
    <action android:name="android.intent.action.SENDTO" />
    <data android:scheme="smsto" />
  </intent>
  <!-- If your app sends emails -->
  <intent>
    <action android:name="android.intent.action.SEND" />
    <data android:mimeType="*/*" />
  </intent>
</queries>

Vous pouvez positionner ces balises <queries> juste au début de votre balise <manifest>, et avant la déclaration de la balise <application>:

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.url">
  
	<queries>
      <!-- If your app opens https URLs -->
      <intent>
        <action android:name="android.intent.action.VIEW" />
        <data android:scheme="https" />
      </intent>
	</queries>
  
  <application
        android:label="url"
        android:name="${applicationName}"
        android:icon="@mipmap/ic_launcher">

Les derniers réglages concernent l'ouverture des liens web, dans le navigateur intégré ou non.

Selon les applications, il peut être intéressant de proposer d'ouvrir les liens vers un navigateur extérieur ou vice-versa, dans le navigateur intégré.

Certaines applications comme Pinterest ou Facebook, ne fonctionne qu'avec les navigateurs intégrés pour encourager les utilisateurs à rester sur leur application.

Pour forcer l'utilisation du navigateur intégré sur Android, vous pouvez ajouter le paramètre forceWebView et lui affecter false:

void _launchURL(String _url) async {
  if (!await launch(
    _url,
    forceWebView: true,
    enableJavaScript: true,
  )) throw 'Could not launch $_url';
}

Il faut également ajouter le paramètre enableJavaScript à true pour optimiser le fonctionnement du navigateur intégré.

Pour iOS, on peut également ouvrir Safari ou n'importe quel navigateur par défaut sur iPhone avec le paramètre forceSafariVC à false:

void _launchURL(String _url) async {
  if (!await launch(
    _url,
    forceSafariVC: false,
  )) throw 'Could not launch $_url';
}

Un dernier petit paramètre concerne le thème de notre navigateur intégré, notamment de la barre de status.

Vous pouvez la personnaliser avec le paramètre statusBarBrightness que vous pouvez affecter au thème sombre ou clair:

statusBarBrightness: Brightness.dark,

Voilà pour l'utilisation complète du package url_launcher, qui vous permet d'ouvrir toute sorte de lien dans vos applications Flutter.

C'est un package très pratique que vous allez pouvoir utiliser à de nombreuses reprises dans vos applications.

1. Installation du package url_launcher

2. Ouvrir différents types de liens

3. Configuration avancée

Articles similaires