Appeler un numéro de téléphone avec une application Flutter


Avatar de Pierre Courtois

Apprenez à appeler un numéro de téléphone directement depuis votre application Flutter en suivant ce guide étape par étape.


téléphone noir sur une table

Guide pour appeler un numéro de téléphone depuis une application Flutter

Appeler un numéro de téléphone affiché dans votre application Flutter est une tâche assez simple grâce au package url_launcher. Voici d-les étapes que vous allez donc devoir suivre :

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 le numéro de téléphone dans une variable

L’étape suivante va être de stocker le numéro de téléphone que vous souhaitez appeler, dans une variable de type Uri. Utiliser cette classe va permettre de formater le numéro afin qu’il soit compréhensible par l’application d’appel et puisse être utilisé :

final Uri _phoneUri = Uri(
  scheme: 'tel',
  path: '0123456789', // Remplacez par le numéro de téléphone souhaité
);

Pour la propriété Path, vous pouvez soit ajouter le numéro de téléphone manuellement, ou faire quelque chose de plus dynamique en y ajoutant une variable de type String. Par exemple, je peux aller récupérer un numéro de téléphone dans Firebase, le stocker dans une variable tel, que je vais venir utiliser comme argument de ma propriété path.

...
var docs = snapshot.data!.docs;
String tel = docs[0]["Phone"]
...

final Uri _phoneUri = Uri(
  scheme: 'tel',
  path: tel, // Le numéro que je vais appeler prendra la valeur actuelle de la variable tel.
);

3. Créer une fonction pour lancer l’application d’appel

L’étape suivante va ensuite être de créer une fonction asynchrone qui va lancer l’application d’appel et y inscrire notre numéro de téléphone. Il est important que celle-ci soit de type async, pour lui laisser le temps de récupérer le numéro de téléphone avant de lancer l’appel.

Future<void> _launchInCall(Uri tel) async {
  print(_phoneUri);
  try {
    if (!await launchUrl(_phoneUri)) {
      throw Exception('Could not launch $_phoneUri');
    }
  } 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 la fonction 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('Appel Téléphonique'),
        ),
        body: Center(
          child: CallButton(),
        ),
      ),
    );
  }
}

class CallButton extends StatelessWidget {
  final Uri _phoneUri = Uri(
    scheme: 'tel',
    path: '0123456789', // Remplacez par le numéro de téléphone souhaité
  );

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

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: () async {
        await _launchInCall(_phoneUri);
      },
      child: Text('Appeler le numéro'),
    );
  }
}

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 ?

Avatar de Pierre Courtois