Ouvrir une URL depuis une application Flutter

Guide ouvrir une URL depuis une application Flutter

Ouvrir un lien affiché dans votre application Flutter est une action relativement simple à mettre en place grâce au package url_launcher. Voici les étapes que vous allez devoir suivre pour cela :

1. Importer le package url_launcher

La première étape consiste simplement à ajouter le package url_launcher à votre projet Flutter. Vous pouvez le faire en ajoutant la dépendance suivante dans votre fichier pubspec.yaml :

dependencies:
  flutter:
    sdk: flutter
  url_launcher: ^6.0.20

Ensuite, importez le package dans les fichiers Dart où vous souhaitez l’utiliser, en ajoutant :

import 'package:url_launcher/url_launcher.dart';

2. Stocker votre URL dans une variable

L’étape suivante va être de stocker l’URL de la page web que vous souhaitez ouvrir, dans une variable de type Uri. Utiliser cette classe va permettre de formater le lien afin qu’il soit compréhensible pour votre moteur de recherche et puisse être ouvert. Attention toutefois, la partie https:// de votre URL doit être tronquée, sans quoi vous allez avoir un message d’erreur :

final Uri _monUrl = Uri(
  scheme: 'https',
  path: 'pub.dev/packages/url_launcher', // Remplacez par le lien souhaité
);

Pour la propriété Path, vous pouvez soit ajouter le lien manuellement, ou faire quelque chose de plus dynamique en y ajoutant une variable de type String. Par exemple, je peux aller récupérer lien dans ma base de donnée Firebase et le stocker dans une variable url, que je vais venir utiliser comme argument de ma propriété path.

...
var docs = snapshot.data!.docs;
String _url = docs[0]["url"]
...

final Uri _monUrl = Uri(
  scheme: 'https',
  path: _url, // Le lien de ma variable _monUrl prendra comme valeur, la valeur actuellement stockée dans _url.
);

3. Créer une fonction pour lancer la recherche dans un moteur de recherche

L’étape suivante va être de créer une fonction asynchrone qui va lancer le moteur de recherche par défaut de votre téléphone et y indiquer votre lien. Attention, il est important que celle-ci soit de type async, pour lui laisser le temps de récupérer le lien avant d’ouvrir le moteur.

Future<void> _launchInUrl(Uri _monUrl) async {
  print(_monUrl);
  try {
    if (!await launchUrl(_monUrl)) {
      throw Exception('Could not launch $_monUrl');
    }
  } catch (e) {
    print(e.toString());
  }
}

4. Intégrer la fonction dans un bouton

Enfin, intégrez votre fonction dans un bouton ou un TapGestureRecognizer afin de la lancer quand un utilisateur clique dessus. Pensez bien, encore une fois, à rendre la fonction asynchrone, sans quoi elle ne marchera pas.

Code d’exemple

Voici un code d’exemple complet que vous pouvez utiliser et modifier selon vos besoins :

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('Ouvrir lien'),
        ),
        body: Center(
          child: UrlButton(),
        ),
      ),
    );
  }
}

class UrlButton extends StatelessWidget {
  final Uri _urlUri = Uri(
    scheme: 'https',
    path: 'tuto-flutter.fr/', // Remplacez par le lien souhaité
  );

  Future<void> _launchInBrowser(_url) async {
    print(_url);
    try {
      if (!await launchUrl(_url, mode: LaunchMode.inAppBrowserView))
        throw Exception('Could not launch $_url');
    } catch (e) {
      print(e.toString());
    }
  }

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: () async {
        await _launchInBrowser(_urlUri);
      },
      child: Text('Ouvrir le lien'),
    );
  }
}

Plus de guides Flutter

À la recherche de plus de guides pour coder rapidement une application Flutter dynamique ? Pourquoi ne pas consulter la liste complète ?

Liste de guides Flutter