URL launcher in Flutter

When developing mobile apps in Flutter sometimes we require to launch some other app from our app. For example, map applications, caller applications, browsers, mail applications, and may more.

In Flutter, we have a very efficient package i.e. url_launcher package.

Partner with our Flutter app development company for your app ideas.

Let’s see how we can use url_launcher package in our app:

Firstly, we need to add the dependency to the pubspec.yml file. Then, run the flutter pub get command.

dependencies:
  url_launcher: ^6.0.9

1 2	dependencies: url_launcher: ^6.0.9

Then in the dart file we can use it as per our need.

import 'package:url_launcher/url_launcher.dart';

1	import 'package:url_launcher/url_launcher.dart';

Now, let’s see an example implementation.

import 'dart:async';
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(
      title: 'URL Launcher',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'URL Launcher'),
    );
  }
}

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

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

class _MyHomePageState extends State<MyHomePage> {
  Future<void>? _launched;
  String _phone = '';

  Widget _launchStatus(BuildContext context, AsyncSnapshot<void> snapshot) {
    if (snapshot.hasError) {
      return Text('Error: ${snapshot.error}');
    } else {
      return const Text('');
    }
  }

  Future<void> _makePhoneCall(String url) async {
    if (await canLaunch(url)) {
      await launch(url);
    } else {
      throw 'Could not launch $url';
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: ListView(
        children: <Widget>[
          Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Padding(
                padding: const EdgeInsets.all(16.0),
                child: TextField(onChanged: (String text) => _phone = text, decoration: const InputDecoration(hintText: 'Input the phone number to launch')),
              ),
              ElevatedButton(
                onPressed: () => setState(() {
                  _launched = _makePhoneCall('tel:$_phone');
                }),
                child: const Text('Make phone call'),
              ),
              const Padding(padding: EdgeInsets.all(16.0)),
              FutureBuilder<void>(future: _launched, builder: _launchStatus),
            ],
          ),
        ],
      ),
    );
  }
}

import 'dart:async';

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(

title: 'URL Launcher',

theme: ThemeData(

primarySwatch: Colors.blue,

home: MyHomePage(title: 'URL Launcher'),

);

}

class MyHomePage extends StatefulWidget {

MyHomePage({Key? key, required this.title}) : super(key: key);

final String title;

@override

_MyHomePageState createState() => _MyHomePageState();

}

class _MyHomePageState extends State<MyHomePage> {

Future<void>? _launched;

String _phone = '';

Widget _launchStatus(BuildContext context, AsyncSnapshot<void> snapshot) {

if (snapshot.hasError) {

return Text('Error: ${snapshot.error}');

} else {

return const Text('');

}

Future<void> _makePhoneCall(String url) async {

if (await canLaunch(url)) {

await launch(url);

} else {

throw 'Could not launch $url';

}

@override

Widget build(BuildContext context) {

return Scaffold(

appBar: AppBar(

title: Text(widget.title),

body: ListView(

children: <Widget>[

Column(

mainAxisAlignment: MainAxisAlignment.center,

children: <Widget>[

Padding(

padding: const EdgeInsets.all(16.0),

child: TextField(onChanged: (String text) => _phone = text, decoration: const InputDecoration(hintText: 'Input the phone number to launch')),

ElevatedButton(

onPressed: () => setState(() {

_launched = _makePhoneCall('tel:$_phone');

}),

child: const Text('Make phone call'),

const Padding(padding: EdgeInsets.all(16.0)),

FutureBuilder<void>(future: _launched, builder: _launchStatus),

);

}

In this way we can implement the URL launcher package in our app.

For a visual explanation we can also take reference from the official video by the Flutter team.

Thanks for reading this article ❤

If I missed something 🙈, then please let me know in the comments. I would love to improve.

deep links flutter

rishabh sharma

28 Apr, 2023
Updated by - rishabh sharma
31 Aug, 2021
Created by - rishabh sharma

. . .

URL launcher in Flutter

Leave a Comment Cancel Reply

Message Sent!