Hacer llamadas en Flutter

En este mundo en línea, la atención al cliente juega un papel importante en el éxito de una empresa. Los usuarios quedan bastante satisfechos cuando conversan con los ejecutivos a través de llamadas. Esto ha obligado a las empresas a agregar números de teléfono a sus aplicaciones para que sus clientes puedan contactarlos fácilmente. Pero marcar esos números desde la aplicación en la aplicación de teléfono predeterminada lo hace bastante engorroso. Entonces, para mejorar la experiencia del usuario, Flutter ha creado una función en la que el usuario puede llamar al otro, solo con un clic. Esto se puede lograr usando el complemento «url_launcher».

Llamadas en Flutter

En Flutter, todo es un widget y, de la misma manera, Flutter también usa una gran cantidad de complementos o dependencias para que la aplicación funcione de manera más rápida y sencilla. En este caso, el complemento «url_launcher» se puede utilizar para realizar una llamada en una aplicación móvil. Los pasos para agregar el complemento a la aplicación Flutter son los siguientes:

1. Abra el archivo » pubspec.yam l» de la carpeta del proyecto.

2. En el archivo pubspec.yaml, escriba » url_launcher :» en dependencias.

Después de eso, el código se ve así:

dependencies:
 flutter:
   sdk: flutter
 url_launcher:

3. Ahora haga clic en el botón «Pub Get» en la parte superior de la aplicación (Android Studio).

4. El «Proceso finalizado con el código de salida 0» en la consola muestra que la dependencia se agregó correctamente.

5. Ahora importe el complemento o paquete agregando «importar ‘paquete: url_launcher/url_launcher.dart’;» código en la parte superior del archivo “main.dart” .

Función:

Ahora, creemos una función a la que se pueda llamar cada vez que el usuario haga clic en un botón, que esté vinculado a un número de teléfono, para realizar una llamada.

_makingPhoneCall() async {
  var url = Uri.parse("tel:9776765434");
  if (await canLaunchUrl(url)) {
    await launchUrl(url);
  } else {
    throw 'Could not launch $url';
  }
}

1. La función se nombra aquí como » _makingPhoneCall » y la función se declara como «async», por lo que devuelve una promesa.
2. La variable «url» se asigna con el número de teléfono requerido, como una string. La sintaxis «tel:» aquí antes del número de teléfono hace que Flutter se dé cuenta de que el siguiente número es un número de teléfono que debe abrirse en la aplicación de teléfono predeterminada. Se declara como una “const”, para que la variable no se modifique bajo ninguna circunstancia.
3. Si existe la posibilidad de lanzar la URL, solo entonces se lanza la URL llamando a la función launch() con la variable URL como atributo.
4. De lo contrario, arrojará/imprimirá un texto con el valor de la URL, como un mensaje de error.

Llamando a la función:

La función anterior se puede llamar cuando sea necesario dentro del programa, llamando el nombre de las funciones tal como están. El ejemplo es el siguiente:

      ElevatedButton(
      onPressed: _makingPhoneCall,
      style: ButtonStyle(
        padding:
            MaterialStateProperty.all(const EdgeInsets.all(5.0)),
        textStyle: MaterialStateProperty.all(
          const TextStyle(color: Colors.black),
        ),
      ),
      child: const Text('Here'),
    ), // ElevatedButton
 
 
// DEPRECATED
    // RaisedButton(
    //   onPressed: _makingPhoneCall,
    //   child: Text('Call'),
    //   textColor: Colors.black,
    //   padding: const EdgeInsets.all(5.0),
    // ),

1. Esto crea un botón elevado que tiene el texto «Llamar».
2. Para el atributo onPressed , llamamos » _makingPhoneCall » de modo que, cuando se presiona el botón, se abre la aplicación de teléfono predeterminada y el número de teléfono en la variable de URL se marca automáticamente, lo que facilita las cosas para el usuario.

Código fuente completo:

// importing dependencies
import 'package:flutter/material.dart';
// cupertino package was unuses
import 'package:url_launcher/url_launcher.dart';
 
 
// function to trigger the app build
void main() => runApp(const MyApp());
 
_makingPhoneCall() async {
  var url = Uri.parse("tel:9776765434");
  if (await canLaunchUrl(url)) {
    await launchUrl(url);
  } else {
    throw 'Could not launch $url';
  }
}
 
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Geeks for Geeks'),
          backgroundColor: Colors.green,
        ), // AppBar
        body: SafeArea(
          child: Center(
            child: Column(
              children: [
                Container(
                  height: 250.0,
                ),//Container
                const Text(
                  'Welcome to GFG!',
                  style: TextStyle(
                    fontSize: 30.0,
                    color: Colors.green,
                    fontWeight: FontWeight.bold,
                  ),//TextStyle
                ),//Text
                Container(
                  height: 20.0,
                ),
                const Text(
                  'For further Updates',
                  style: TextStyle(
                    fontSize: 20.0,
                    color: Colors.green,
                    fontWeight: FontWeight.bold,
                  ),
                ),
                Container(
                  height: 20.0,
                ),
               ElevatedButton(
                  onPressed: _makingPhoneCall,
                  style: ButtonStyle(
                    padding:
                        MaterialStateProperty.all(const EdgeInsets.all(5.0)),
                    textStyle: MaterialStateProperty.all(
                      const TextStyle(color: Colors.black),
                    ),
                  ),
                  child: const Text('Here'),
                ), // ElevatedButton
 
 
            // DEPRECATED
                // RaisedButton(
                //   onPressed: _makingPhoneCall,
                //   child: Text('Call'),
                //   textColor: Colors.black,
                //   padding: const EdgeInsets.all(5.0),
                // ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

Producción: