How Can I Add phone call action to my ListTile in Flutter

Question

I am writing a tool for community. My purpose is to give name surname and numbers in listtile and when people click on the names it dials assigned number. I tried url_launcher but I couldn't make it. Can check and tell me what is wrong with my code. This here is my code that I couldn't launch is there anything I miss?

     import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:sarisayfav1/Gas.dart';
import 'package:sarisayfav1/Kargo.dart';
import 'package:sarisayfav1/Tamir.dart';
import 'package:url_launcher/url_launcher.dart';

import 'Book.dart';
import 'Food.dart';

class Arac extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Akcakale Sari Sayfa',
      theme: ThemeData(
        backgroundColor: Colors.black87,
        primaryColor: Colors.black,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Akçakale Sarı Sayfa'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      drawer: Drawer(
        child: ListView(
          // Important: Remove any padding from the ListView.

          padding: EdgeInsets.zero,
          children: <Widget>[
            DrawerHeader(
              child: Text('Akçakale Sarı Sayfa Uygulaması',
                  style: TextStyle(color: Colors.amberAccent, fontSize: 25)),
              decoration: BoxDecoration(
                color: Colors.black87,
              ),
            ),
            ListTile(
              leading: Icon(Icons.directions_bus),
              title: Text(
                'Kargo Telefon Numaraları',
              ),
              onTap: () {
                Navigator.push(context,
                    new MaterialPageRoute(builder: (context) => new Kargo()));
                // Update the state of the app.
                // ...
              },
            ),
            ListTile(
              leading: Icon(Icons.food_bank_outlined),
              title: Text(
                'Lokanta-Yiyecek-İçecek',
              ),
              onTap: () {
                Navigator.push(context,
                    new MaterialPageRoute(builder: (context) => new Food()));
                // Update the state of the app.
                // ...
              },
            ),
            ListTile(
              leading: Icon(Icons.menu_book_rounded),
              title: Text(
                'Kırtasiye-Kitapçı',
              ),
              onTap: () {
                Navigator.push(context,
                    new MaterialPageRoute(builder: (context) => new Book()));
                // Update the state of the app.
                // ...
              },
            ),
            ListTile(
              leading: Icon(Icons.local_gas_station),
              title: Text('Tüpçü-Sucu'),
              onTap: () {
                Navigator.push(context,
                    new MaterialPageRoute(builder: (context) => new Gas()));
              },
            ),
            ListTile(
              leading: Icon(Icons.home_repair_service),
              title: Text(
                'Elektrik-Su-Mobilya Tamircisi',
              ),
              onTap: () {
                Navigator.push(context,
                    new MaterialPageRoute(builder: (context) => new Tamir()));
                // Update the state of the app.
                // ...
              },
            ),
            ListTile(
              leading: Icon(Icons.local_taxi),
              title: Text('Taşıma Hizmeti Sağlayan Özel Araç Sahipleri'),
              onTap: () {
                Navigator.push(context,
                    new MaterialPageRoute(builder: (context) => new Arac()));
              },
            ),
          ],
        ),
      ),
      appBar: AppBar(
        leading: Icon(Icons.settings),
        backgroundColor: Colors.black87,
        title: Text(widget.title, style: TextStyle(color: Colors.amberAccent)),
      ),
      body: ListTile(
        leading: Icon(Icons.person),
        dense: true,
        onTap: () => tel:+123456789,
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

Answer 1

You would need to remove spaces(if any) in the phone number so that the native phone app will format the number correctly (e.g. +1 234 567 8901). I think the issue was only in iOS because Android formatted it correctly even with spaces.

import 'package:url_launcher/url_launcher.dart' as UrlLauncher;

_launchUrl(String phoneNumber) async {   
   try {
    if (phoneNumber != null) {
      phoneNumber = phoneNumber.replaceAll(" ", "");
      if (await UrlLauncher.canLaunch(phoneNumber)) {
        await UrlLauncher.launch(phoneNumber);
      }
    }
   } catch(e){
       print('Cannot launch url');
     } 
  }