Flutter Call Phone Number Dialog Using URL Launcher

Call phone number in our flutter application. This is what we are going to learn today. In this tutorial you are gonna look at a dependency called URL Launcher. This package is so powerful that will allow us to use default applications of mobile operating system in our case phone app.

For this purpose we are going to use intents of android. If you don’t know about intents. Intents are actions that are use to navigate from screen to screen of either a single application or another. There are basically two types of intents:

Implicit (used for calling intended actions like sharing image on different system apps)
explicit (communication between different activities within the same app)

So, lets start today’s tutorial.

Step 1: Installing url_launcher

You can either install it from terminal as follows:

flutter pub add url_launcher

or add in pubspec.yaml manually under dependencies

dependencies:
  url_launcher: ^6.0.20

Step 2: Add Android Dial Intent

In some case it is not required our dependency handles everything for us. When I was running on my system everything works fine without adding this intent. Yet it is important if you want to do a safe play or in case some error occurred.

Open android > app > src > main > AndroidManifest.xml file and add following code just under </application>

 <queries>
        <intent>
            <action android:name="android.intent.action.DIAL" />
            <data android:scheme="tel" />
        </intent>
    </queries>

Step 2: Working with main.dart

In our main file we will first need to create a field where user can enter number.

TextFormField(
      decoration: const InputDecoration(
      labelText: 'Enter Number',
      ),
      controller: numberController,
      keyboardType: TextInputType.number,
 )),

Note that I have use keyboard type of number because we don’t users to add un-necessary characters. That will effect our app and can also cause errors.

And a controller named numberController, we will use it in future to get text from input.

Now, its time to create a function that will use launch method from uri_launcher package

Future<void> _dialNumber() async {
    String phoneNumber = numberController.text.toString();
    final Uri launchUri = Uri(
      scheme: 'tel',
      path: phoneNumber,
    );
    await launch(launchUri.toString());
  }

Lets breakdown this code, first of all everything is wrapped in an async function. Because we need to delay execution until system respond to our request. There maybe a case when there is not default app to proceed request. But that is soo minimal. Inside this function we are first getting text from controller. Next is creating a url.

For this purpose, we are using Uri(). This class is use to parse urls. For example in our case we defining components of url.

Finally, launching that url with launch() fucntion.

Last step is assigning this function to our button.

Container(
margin: const EdgeInsets.fromLTRB(10, 20, 0, 0),
child: ElevatedButton(
child: const Text('Call'),
onPressed: () => _dialNumber(),
))

Here is the final main.dart file

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: const Text("Dial Number From Flutter App"),
            ),
            body: Center(child: Dial())));
  }
}

class Dial extends StatefulWidget {
  DialScreen createState() => DialScreen();
}

class DialScreen extends State<Dial> {
  TextEditingController numberController = TextEditingController();

  Future<void> _dialNumber() async {
    String phoneNumber = numberController.text.toString();
    final Uri launchUri = Uri(
      scheme: 'tel',
      path: phoneNumber,
    );
    await launch(launchUri.toString());
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: SafeArea(
            top: true,
            child: Center(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  Container(
                      padding: const EdgeInsets.fromLTRB(10, 0, 10, 0),
                      margin: const EdgeInsets.fromLTRB(0, 20, 0, 0),
                      child: TextFormField(
                        decoration: const InputDecoration(
                          labelText: 'Enter Number',
                        ),
                        controller: numberController,
                        keyboardType: TextInputType.number,
                      )),
                  Container(
                      margin: const EdgeInsets.fromLTRB(10, 20, 0, 0),
                      child: ElevatedButton(
                        child: const Text('Call'),
                        onPressed: () => _dialNumber(),
                      ))
                ],
              ),
            )));
  }
}

This is it for this article. Now you are able to call phone number using default phone app and make a call in any project.