Making Calls in Flutter

13 Jun, 2022
In this online world, customer care is playing a major role in the success of a company. Users are quite satisfied when they converse with the executives through calls. This has forced companies to add phone numbers to their apps for their customers to contact them easily. But, dialing those numbers from the app into the default phone app makes it quite cumbersome. So, in order to improve the user experience, Flutter has come up with a feature where the user can call the other, just with a click. This can be achieved by using the “url_launcher” plugin.
In Flutter, everything is a widget and in the same way, Flutter also uses a lot of plugins or dependencies in order to make the app work faster and easier. In this case, the “url_launcher” plugin can be used to make a call in a mobile application. The steps for adding the plugin to the Flutter app are as follows:
1. Open “pubspec.yaml” file from the project folder.
2. In the pubspec.yaml file, type “url_launcher:” under dependencies.
After that, the code looks like this:
Dart
dependencies: flutter:   sdk: flutter url_launcher:
3. Now click “Pub Get” button at the top of the application (Android Studio).
4. The “Process finished with exit code 0“ in the console shows that the dependency is been added successfully.
5. Now import the plugin or package by adding the “import ‘package:url_launcher/url_launcher.dart’;” code to the top of the “main.dart” file.
Now, let’s create a function that can be called, whenever the user clicks a button, that’s linked to a phone number, to make a call.
Dart
_makingPhoneCall() async {  var url = Uri.parse("tel:9776765434");  if (await canLaunchUrl(url)) {    await launchUrl(url);  } else {    throw 'Could not launch $url';  }}
The function is named here as “_makingPhoneCall” and the function is declared as “async”, so that it returns a promise.The “url” variable is assigned with the required phone number, as a string. The “tel:” syntax here before the phone number, makes Flutter realize that the following number is a phone number that has to be opened in the default Phone App. It is declared as a “const”, so that the variable is not changed under any circumstance.If there is a possibility to launch the URL, only then the URL is launched by calling the launch() function with the URL variable as an attribute.Else, it will throw/print a text with the URL value, as an error message.
The function is named here as “_makingPhoneCall” and the function is declared as “async”, so that it returns a promise.
The “url” variable is assigned with the required phone number, as a string. The “tel:” syntax here before the phone number, makes Flutter realize that the following number is a phone number that has to be opened in the default Phone App. It is declared as a “const”, so that the variable is not changed under any circumstance.
If there is a possibility to launch the URL, only then the URL is launched by calling the launch() function with the URL variable as an attribute.
Else, it will throw/print a text with the URL value, as an error message.
The above function can be called when needed inside the program, by calling the name of the functions as it is. The example is as follows:
Dart
      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),    // ),
This creates a raised button having the text “Call” on it.For the onPressed attribute, we are calling “_makingPhoneCall” so that, when the button is pressed, the default Phone app is opened and the phone number in the URL variable is dialed automatically, making it easier for the user.
This creates a raised button having the text “Call” on it.
For the onPressed attribute, we are calling “_makingPhoneCall” so that, when the button is pressed, the default Phone app is opened and the phone number in the URL variable is dialed automatically, making it easier for the user.
Complete Source Code:
Dart
// importing dependenciesimport 'package:flutter/material.dart';// cupertino package was unusesimport 'package:url_launcher/url_launcher.dart';  // function to trigger the app buildvoid 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),                // ),              ],            ),          ),        ),      ),    );  }}
Output:
ankit_kumar_
Android
Dart
Flutter
Android
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Android Architecture
MVVM (Model View ViewModel) Architecture Pattern in Android
Services in Android with Example
Android Tutorial
Bottom Navigation Bar in Android
Flutter - DropDownButton Widget
Listview.builder in Flutter
Flutter - Custom Bottom Navigation Bar
Splash Screen in Flutter
Flutter - Asset Image