Are you tired of manually searching for the phone dialer app on your device every time you want to make a call? Do you wish there was a way to open the dialer app directly from your Flutter app with the number already entered?

Well, wonder no more! In this blog post, we’ll show you how to open the phone dialer app with a pre-filled number in Flutter.

Table of Contents

The Problem

When you want to make a call from your Flutter app, you typically need to click on a button or text field that triggers a call. This can be cumbersome and may require the user to manually enter the phone number. But what if you want to pre-fill the number and directly open the dialer app? That’s where the `tel:` Uri comes in.

The Solution

To open the phone dialer app with a pre-filled number, you’ll need to use the `tel:` Uri scheme in your Flutter app. This scheme is specifically designed to launch the phone dialer app and pre-fill the number.

Here’s the step-by-step process:

1. Create a Text Widget

Start by creating a text ( `Text` widget) in your Flutter app where the user can input the phone number. You can also use a pre-filled `Text` widget to show the phone number.

Text(
'Call us at 0123456789',
style: TextStyle(fontSize: 16.0),
)

Dart

2. Handle Tap Event

Add a tap event listener to the text field or `Text` widget to detect when the user taps on it.

Text(
'Call us at 0123456789',
style: TextStyle(fontSize: 16.0),
onTap: () {
// Handle tap event here
},
)

Dart

3. Use `tel:` Uri

In the tap event handler, use the `tel:` Uri scheme to open the phone dialer app with the pre-filled number.
`

Text(
'Call us at 0123456789',
style: TextStyle(fontSize: 16.0),
onTap: () async {
final Uri uri = Uri(scheme: 'tel', path: '0123456789');
await launchUrl(uri);
},
)

Dart

In this code, we create a `Uri` object using the `tel:` scheme and pre-fill the number in the `path` property. We then use the `launchUrl` package to launch the URL.

Putting it all Together

Here’s the complete code snippet:

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('Call Us'),
        ),
        body: Center(
          child: Text(
            'Call us at 0123456789',
            style: TextStyle(fontSize: 16.0),
            onTap: () async {
              final Uri uri = Uri(scheme: 'tel', path: '0123456789');
              await launchUrl(uri);
            },
          ),
        ),
      ),
    );
  }
}

Dart

Conclusion

That’s it! With these simple steps, you can open the phone dialer app with a pre-filled number in Flutter. This is a useful feature that can enhance the user experience in your app, especially in situations where you need to pre-populate the phone number for the user.