Flutter Tutorial

Flutter url launcher for Open Email, WhatsApp, dial pad , URL on button click

Flutter url launcher for Open Email, WhatsApp, dial pad , URL on button click

Hi, Flutter developer in the flutter example we are learning and sharing how to use Flutter URL launcher for email Intent like an android. On the Button, click Send email in a flutter, and Send a message to WhatsApp, On Call Button click open dial pad for call on android and ios phones. And Also launch the URL on the button click.

For these URL launchers in a flutter, I am using a dependency a url_launcher.  let’s make a method for the all-intent call following the below code.

Flutter URL launcher Example

So let’s start to make an example for this launcher. first, you can add dependencies in your pubspec.yaml update pubspec file.

dependencies:
  flutter:
    sdk: flutter
  url_launcher: ^6.1.2

you can use the below method to open the WhatsApp button click and set the message and send the number.

_launchWhatsapp() async {
  var whatsapp = "+91*********";
  var whatsappAndroid =Uri.parse("whatsapp://send?phone=$whatsapp&text=hello");
  if (await canLaunchUrl(whatsappAndroid)) {
    await launchUrl(whatsappAndroid);
  } else {
    ScaffoldMessenger.of(context).showSnackBar(
      const SnackBar(
        content: Text("WhatsApp is not installed on the device"),
      ),
    );
  }
}

Now I create a method for the launch of the email App in both android and ios mobile. Ans Also set the subject and the body massage of the email.

_launchEmail() async {
  final url =
  Uri.encodeFull('mailto:info.codeplayon@gmail.com?subject=Codeplayon&body=New plugin');
  if (await canLaunch(url)) {
    await launch(url);
  } else {
    throw 'Could not launch $url';
  }
}

Below I make a launcher for opening the daily paid. On the button click mobile dial pad for call a number is open on both platformer android and ios follow the below code.

_launchCaller() async {
  const url = "tel:1800******";
  if (await canLaunch(url)) {
    await launch(url);
  } else {
    throw 'Could not launch $url';
  }
}

In this code, I open a web URL with the click button. Your app requires the open a website with a button click. you can use the below code.

_launchURL() async {
  const url = 'https://www.codeplayon.com/';
  final uri = Uri.parse(url);
  if (await canLaunchUrl(uri)) {
    await launchUrl(uri);
  } else {
    throw 'Could not launch $url';
  }
}

 

in this flutter URL launcher, I open the youtube app on the button click, and play the video. used the below code for youtube open.

_launchYoutube() async {
  if (Platform.isIOS) {
    if (await canLaunch(
        'youtube://https://www.youtube.com/watch?v=JlWFSdmmWYI')) {
      await launch(
          'youtube://https://www.youtube.com/watch?v=JlWFSdmmWYI',
          forceSafariVC: false);
    } else {
      if (await canLaunch(
          'https://www.youtube.com/watch?v=JlWFSdmmWYI')) {
        await launch(
            'https://www.youtube.com/watch?v=JlWFSdmmWYI');
      } else {
        throw 'Could not launch https://www.youtube.com/watch?v=JlWFSdmmWYI';
      }
    }
  } else {
    const url = 'https://www.youtube.com/watch?v=JlWFSdmmWYI';
    if (await canLaunch(url)) {
      await launch(url);
    } else {
      throw 'Could not launch $url';
    }
  }
}

Also, You can see below full-screen UI and other code.

Full Souce code.

import 'dart:io';

import 'package:flutter/material.dart';
import 'package:spin_ev_charging/Screens/ContactUs/CallbackRequestTabView.dart';
import 'package:url_launcher/url_launcher.dart';

import '../../Utils/constants.dart';
import '../Custom/BorderBox.dart';

class ContactUsView extends StatefulWidget {

  @override
  _ContactUsViewState createState() => _ContactUsViewState();

}

class _ContactUsViewState extends State<ContactUsView> {

  @override
  Widget build(BuildContext context) {
    final Size size = MediaQuery
        .of(context)
        .size;
    final ThemeData themeData = Theme.of(context);

    return Scaffold(
      backgroundColor: COLOR_BACKGROUND,
      body: SingleChildScrollView(
        child: Container(
          width: size.width,
          height: size.height,
          // color: COLOR_WHITE,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: [
              Container(
                padding: EdgeInsets.fromLTRB(20, 62, 20, 0),
                child: Column(
                  children: [
                    Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          BorderBox(
                            child: Icon(Icons.arrow_back_ios_new),
                            // Image.asset('assets/images/frame_green_logo.png'),
                            width: 44,
                            height: 44,
                            isAction: 1,
                            tabHandler: () {
                              Navigator.pop(context);
                            },
                          ),
                        ]),
                    SizedBox(
                      height: size.height * 0.06,
                    ),
                    Row(
                      children: [
                        Text(
                          "Connect With us",
                          style: themeData.textTheme.headline1,
                          // textAlign: TextAlign.left,
                        ),
                      ],
                    ),
                    SizedBox(
                      height: size.height * 0.04,
                    ),
                    GestureDetector(
                      onTap: (){
                        _launchCaller();
                      },
                      child: Card(
                        shape: RoundedRectangleBorder(
                          //<-- SEE HERE
                          side: BorderSide(
                            color: COLOR_LIGHT_GRAY,
                          ),
                          borderRadius: BorderRadius.circular(8.0),
                        ),
                        child: Padding(
                          padding: const EdgeInsets.all(25),
                              child: Row(
                                children: [
                                  Icon(Icons.call,color: Colors.grey,),
                                  SizedBox(width: 10),
                                  Text("1800123456789", style: TextStyle(color: Colors.black, fontWeight: FontWeight.w500, fontSize: fontsize18)),
                                ],
                              ),

                        ),
                      ),
                    ),
                    GestureDetector(
                      onTap: (){
                        _launchWhatsapp();
                      },
                      child: Card(
                        shape: RoundedRectangleBorder(
                          //<-- SEE HERE
                          side: BorderSide(
                            color: COLOR_LIGHT_GRAY,
                          ),
                          borderRadius: BorderRadius.circular(8.0),
                        ),
                        child: Padding(
                          padding: const EdgeInsets.all(25),
                          child: Row(
                            children: [
                              Icon(Icons.whatsapp,color: Colors.grey,),
                              SizedBox(width: 10,),
                              Text("WhatsApp ", style: TextStyle(color: Colors.black, fontWeight: FontWeight.w500, fontSize: fontsize16)),
                            ],
                          ),

                        ),
                      ),
                    ),
                    GestureDetector(
                      onTap: (){
                        _launchEmail();
                      },
                      child: Card(
                        shape: RoundedRectangleBorder(
                          //<-- SEE HERE
                          side: BorderSide(
                            color: COLOR_LIGHT_GRAY,
                          ),
                          borderRadius: BorderRadius.circular(8.0),
                        ),
                        child: Padding(
                          padding: const EdgeInsets.all(25),
                          child: Row(
                            children: [
                              Icon(Icons.mail,color: Colors.grey,),
                              SizedBox(width: 10,),
                              Text("Info.codeplayon@gmail.com", style: TextStyle(color: Colors.black, fontWeight: FontWeight.w500, fontSize: fontsize16)),
                            ],
                          ),

                        ),
                      ),
                    ),
                    GestureDetector(
                      onTap: (){
                        _launchURL();
                      },
                      child: Card(
                        shape: RoundedRectangleBorder(
                          //<-- SEE HERE
                          side: BorderSide(
                            color: COLOR_LIGHT_GRAY,
                          ),
                          borderRadius: BorderRadius.circular(8.0),
                        ),
                        child: Padding(
                          padding: const EdgeInsets.all(25),
                          child: Row(
                            children: [
                              Icon(Icons.language,color: Colors.grey,),
                              SizedBox(width: 10,),
                              Text("https://www.codeplayon.com/", style: TextStyle(color: Colors.black, fontWeight: FontWeight.w500, fontSize: fontsize16)),
                            ],
                          ),

                        ),
                      ),
                    ),
                    GestureDetector(
                      onTap: (){
                        _launchYoutube();
                      },
                      child: Card(
                        shape: RoundedRectangleBorder(
                          //<-- SEE HERE
                          side: BorderSide(
                            color: COLOR_LIGHT_GRAY,
                          ),
                          borderRadius: BorderRadius.circular(8.0),
                        ),
                        child: Padding(
                          padding: const EdgeInsets.all(25),
                          child: Row(
                            children: [
                              Icon(Icons.videocam_rounded,color: Colors.grey,),
                              SizedBox(width: 10,),
                              Text("Youtube", style: TextStyle(color: Colors.black, fontWeight: FontWeight.w500, fontSize: fontsize16)),
                            ],
                          ),

                        ),
                      ),
                    ),
                    SizedBox(
                      height: size.height * 0.02,
                    ),

                  ],

                ),
              ),
            ],
          ),
        ),
      ),
    );
  }

  _launchWhatsapp() async {
    var whatsapp = "+91*********";
    var whatsappAndroid =Uri.parse("whatsapp://send?phone=$whatsapp&text=hello");
    if (await canLaunchUrl(whatsappAndroid)) {
      await launchUrl(whatsappAndroid);
    } else {
      ScaffoldMessenger.of(context).showSnackBar(
        const SnackBar(
          content: Text("WhatsApp is not installed on the device"),
        ),
      );
    }
  }

  _launchCaller() async {
    const url = "tel:18001234567";
    if (await canLaunch(url)) {
      await launch(url);
    } else {
      throw 'Could not launch $url';
    }
  }

  _launchEmail() async {
    final url =
    Uri.encodeFull('mailto:info.codeplayon@gmail.com?subject=News&body=New plugin');
    if (await canLaunch(url)) {
      await launch(url);
    } else {
      throw 'Could not launch $url';
    }
  }

  _launchURL() async {
    const url = 'https://www.codeplayon.com/';
    final uri = Uri.parse(url);
    if (await canLaunchUrl(uri)) {
      await launchUrl(uri);
    } else {
      throw 'Could not launch $url';
    }
  }

  _launchYoutube() async {
    if (Platform.isIOS) {
      if (await canLaunch(
          'youtube://https://www.youtube.com/watch?v=JlWFSdmmWYI')) {
        await launch(
            'youtube://https://www.youtube.com/watch?v=JlWFSdmmWYI',
            forceSafariVC: false);
      } else {
        if (await canLaunch(
            'https://www.youtube.com/watch?v=JlWFSdmmWYI')) {
          await launch(
              'https://www.youtube.com/watch?v=JlWFSdmmWYI');
        } else {
          throw 'Could not launch https://www.youtube.com/watch?v=JlWFSdmmWYI';
        }
      }
    } else {
      const url = 'https://www.youtube.com/watch?v=JlWFSdmmWYI';
      if (await canLaunch(url)) {
        await launch(url);
      } else {
        throw 'Could not launch $url';
      }
    }
  }
}

 

Read More:-