Tuto Flutter.fr

Poser une question

Ouvrir des URL avec le package Url Launcher

Avatar de Pierre Courtois
Pierre Courtois

Que vous souhaitiez ouvrir un URL dans votre moteur de recherche, appeler un numéro de téléphone, ou bien envoyer un SMS, url_launcher est la solution. Dans ce guide, je vous explique comment utiliser ce package flutter très utile.

package flutter
Table des matières
  1. Installer le package Url launcher
  2. Utiliser le package Url Launcher

Installer le package Url launcher

La première chose à faire pour utiliser un package Flutter est de l’exporter. Deux options s’offrent donc à vous pour télécharger le package url_launcher dans sa dernière version (6.3.0) : 

Utiliser le terminal de commande dans Visual Studio et entrer la commande : 

  • $ flutter pub add url_launcher ;
  • Placer la dépendance url_launcher: ^6.3.0 dans votre dossier pubspec.yaml.

Une fois cela fait, laissez le package se télécharger et ajoutez la ligne import ‘package:url_launcher/url_launcher.dart’; en haut de chaque document en .dart où vous souhaitez l’utiliser.

Configuration supplémentaire pour Android 12 et IOS 10

Une étape supplémentaire est requise pour que le package puisse fonctionner sur les versions d’Android 11 et supérieurs et IOS 9 et supérieures.

Pour Android, rendez-vous dans votre fichier AndroidManifest.xml et ajoutez ces lignes de code, juste au-dessus du tag de fermeture </manifest> : 

<manifest xmlns:android="http://schemas.android.com/apk/res/android">

...
//CODE A AJOUTER
<queries>
        <intent>
        <action android:name="android.intent.action.VIEW" />
        <category android:name="android.intent.category.BROWSABLE" />
        <data android:scheme="https" />
        </intent>
        <intent>
        <action android:name="android.intent.action.VIEW" />
        <data android:scheme="https" />
        </intent>
        <intent>
        <action android:name="android.intent.action.VIEW" />
        <data android:scheme="tel" />
        </intent>
    </queries>
//FIN DU CODE
</manifest>

Pour IOS, rendez-vous dans votre fichier Info.plist et ajoutez ces lignes, juste au-dessus du tag </dict> de fermeture : 

<plist version="1.0">    
  <dict>
    ...
    //CODE A AJOUTER
    <key>LSApplicationQueriesSchemes</key>
    <array>
      <string>sms</string>
      <string>tel</string>
    </array>
    //FIN DU CODE
  </dict>
</plist>

Utiliser le package Url Launcher

Une fois le package installé, Url launcher va vous permettre de réaliser les actions suivantes :

  • Ouvrir des liens dans un moteur de recherche ;
  • Créer un email dans votre boite de messagerie ;
  • Lancer un appel depuis votre application d’appels ;
  • Envoyer un SMS depuis votre application de messagerie ;
  • Ouvrir des documents sauvegardés localement.

Les différents schémas d’URL ne pourront être pris en charge par le package que s’il existe des applications installées sur l’appareil qui peuvent les utiliser. Par exemple, les simulateurs iOS n’ont pas d’application de messagerie ou de téléphone par défaut, et ne peuvent donc pas ouvrir les liens tel : ou mailto :.

Ouvrir un Url

La première chose à faire pour ouvrir une URL avec le package Url launcher, est de la stocker au bon format dans une variable de type Uri.

Uri _monLien = Uri(
    scheme: 'https',
    path: 'pub.dev/packages/url_launcher',
    ),

Une fois cela fait, il ne vous reste plus qu’à utiliser la fonction launchUrl fournie par le package : 

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Lancer Url'),
        ),
        body: Center(
          child: CallButton(),
        ),
      ),
    );
  }
}

class CallButton extends StatelessWidget {
  final Uri _monLien = Uri(
    scheme: 'https',
    path: 'pub.dev/packages/url_launcher', // Remplacez par le lien souhaité
  );


  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: () async {
        try {
      if (!await launchUrl(_monLien)) {
        throw Exception('Could not launch $_monLien');
      }
    } catch (e) {
      print(e.toString());
    }
      },
      child: Text('Ouvrir la page'),
    );
  }
}

Envoyer un mail

La première chose à faire pour envoyer un mail avec le package Url launcher, est de la stocker au bon format dans une variable de type Uri et de créer une fonction pour formater votre mail.

String? encodeQueryParameters(Map<String, String> params) {
  return params.entries
      .map((MapEntry<String, String> e) =>
          '${Uri.encodeComponent(e.key)}=${Uri.encodeComponent(e.value)}')
      .join('&');
}

final Uri emailExemple = Uri(
      scheme: 'mailto',
      path: 'smith@example.com',
      query: encodeQueryParameters(<String, String>{
        'subject': 'Example Subject & Symbols are allowed!',
      }));

Une fois cela fait, il ne vous reste plus qu’à utiliser la fonction launchUrl fournie par le package : 

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("Envoi d'email"),
        ),
        body: Center(
          child: OpenUrlButton(),
        ),
      ),
    );
  }
}

String? encodeQueryParameters(Map<String, String> params) {
  return params.entries
      .map((MapEntry<String, String> e) =>
          '${Uri.encodeComponent(e.key)}=${Uri.encodeComponent(e.value)}')
      .join('&');
}

class OpenUrlButton extends StatelessWidget {
  final Uri emailExemple = Uri(
      scheme: 'mailto',
      path: 'smith@example.com',
      query: encodeQueryParameters(<String, String>{
        'subject': 'Example Subject & Symbols are allowed!',
      }));

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: () async {
        try {
          if (!await launchUrl(emailExemple)) {
            throw Exception('Could not launch $emailExemple');
          }
        } catch (e) {
          print(e.toString());
        }
      },
      child: Text('Envoyer email'),
    );
  }
}

Appeler un numéro de téléphone

La première chose à faire pour appeler un numéro de téléphone avec le package Url launcher, est de le stocker au bon format dans une variable de type Uri.

final Uri launchCall = Uri(
    scheme: 'tel',
    path: '+33123456789',
  );

Une fois cela fait, il ne vous reste plus qu’à utiliser la fonction launchUrl fournie par le package : 

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("Appel"),
        ),
        body: Center(
          child: CallButton(),
        ),
      ),
    );
  }
}

String? encodeQueryParameters(Map<String, String> params) {
  return params.entries
      .map((MapEntry<String, String> e) =>
          '${Uri.encodeComponent(e.key)}=${Uri.encodeComponent(e.value)}')
      .join('&');
}

class CallButton extends StatelessWidget {
  final Uri launchCall = Uri(
    scheme: 'tel',
    path: '+33123456789',
  );

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: () async {
        try {
          if (!await launchUrl(launchCall)) {
            throw Exception('Could not launch $launchCall');
          }
        } catch (e) {
          print(e.toString());
        }
      },
      child: Text('Appeler numéro'),
    );
  }
}

Envoyer un SMS

La première chose à faire pour envoyer des sms avec le package Url launcher, est de le stocker au bon format dans une variable de type Uri et de créer une fonction pour formater le contenu de votre SMS.

String? encodeQueryParameters(Map<String, String> params) {
  return params.entries
      .map((MapEntry<String, String> e) =>
          '${Uri.encodeComponent(e.key)}=${Uri.encodeComponent(e.value)}')
      .join('&');
}

final Uri launchSMS = Uri(
    scheme: 'sms',
    path: '+33123456789',
    queryParameters: <String, String>{
    'body': Uri.encodeComponent('Le message que je veux envoyer'),
  },
  );

Une fois cela fait, il ne vous reste plus qu’à utiliser la fonction launchUrl fournie par le package : 

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("Envoi de SMS"),
        ),
        body: Center(
          child: SMSButton(),
        ),
      ),
    );
  }
}

String? encodeQueryParameters(Map<String, String> params) {
  return params.entries
      .map((MapEntry<String, String> e) =>
          '${Uri.encodeComponent(e.key)}=${Uri.encodeComponent(e.value)}')
      .join('&');
}

class SMSButton extends StatelessWidget {
  final Uri launchSMS = Uri(
    scheme: 'sms',
    path: '+33123456789',
    queryParameters: <String, String>{
    'body': Uri.encodeComponent('Le message que je veux envoyer'),
  },
  );

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: () async {
        try {
          if (!await launchUrl(launchSMS)) {
            throw Exception('Could not launch $launchSMS');
          }
        } catch (e) {
          print(e.toString());
        }
      },
      child: Text('Envoyer SMS'),
    );
  }
}

Ouvrir un dossier

La première chose à faire ouvrir un dossier sauvegardé localement avec le package Url launcher, est de le stocker au bon format dans une variable de type Uri.

final Uri openFile = Uri(
    scheme: 'file',
    path: 'mon_chemin/de_dossier',
  );

Une fois cela fait, il ne vous reste plus qu’à utiliser la fonction launchUrl fournie par le package : 

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("Dossier"),
        ),
        body: Center(
          child: OpenFile(),
        ),
      ),
    );
  }
}


class OpenFile extends StatelessWidget {
  final Uri openFile = Uri(
    scheme: 'file',
    path: 'mon_chemin/de_dossier',
  );

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: () async {
        try {
          if (!await launchUrl(openFile)) {
            throw Exception('Could not launch $openFile');
          }
        } catch (e) {
          print(e.toString());
        }
      },
      child: Text('Ouvrir dossier'),
    );
  }
}
Avatar de Pierre Courtois

Pierre Courtois

Salut ! Je m’appelle Pierre et je me suis lancé dans l’aventure de Flutter en octobre 2023. J’avais une idée pour une application mobile, mais je n’avais aucune connaissance en programmation et je ne savais pas par où commencer. En faisant des recherches, j’ai trouvé quelques vidéos qui parlaient de Flutter et de ses avantages, et j’ai décidé d’essayer. Cependant, cet outil est encore assez nouveau, et la plupart des ressources sont en anglais, payantes ou destinées à des personnes ayant des connaissances avancées en programmation. C’est pourquoi j’ai décidé de lancer ce blog, pour que les francophones qui commencent depuis zéro, comme moi, puissent peut-être trouver des réponses à leurs questions.

Pour aller plus loin