Launch WhatsApp and send messages using Flutter App

While using WhatsApp you might have observed that to send a message to any person you first need to save the phone number and then only we are able to send the message to that person, this is a bit tedious task to do. So to solve this problem we can learn to build a flutter app that can help us directly navigate to the WhatsApp messaging screen without even saving the phone number. So let’s start.

Hi Flutter developers, In this blog, we shall learn about how we can open WhatsApp and send messages to any phone number without saving the phone number.

To implement this functionality we will use the URL launcher package.

Link:

url_launcher | Flutter Package

Install the package to your flutter app:

Edit your dependencies in your pubspec.yaml file:

url_launcher: ^6.0.20

Add the following line into your dart file:

import 'package:url_launcher/url_launcher.dart';

Now url_launcher provides us launch method to launch the URL.

WhatsApp provides us the below API, to open the WhatsApp chat screen with the given phone number.

var whatsappUrl =
         "whatsapp://send?phone=${_countryCodeController.text + _phoneController.text}";

We can trigger this API using the launch and can open WhatsApp.

To add the text message to the API we can add the text as below:

var whatsappUrl =
        "whatsapp://send?phone=${_countryCodeController.text + _phoneController.text}" +
            "&text=${Uri.encodeComponent(_messageController.text)}";

Now let’s build a small app that solves our above purpose. We will make three text fields that take the country code, phone number, and the message from the user.

To do it we need to make three text editing controllers.

TextEditingController _countryCodeController = TextEditingController();
    TextEditingController _messageController = TextEditingController();
    TextEditingController _phoneController = TextEditingController();

Don’t forget to dispose of them:

@override
    void dispose() {
      _countryCodeController.dispose();
      _phoneController.dispose();
      _messageController.dispose();
      super.dispose();
    }

Now build a custom text field for UI:

import 'package:flutter/material.dart';
    import 'package:what_chat/main.dart';
    class CustomTextField extends StatelessWidget {
      final double width;
      final TextEditingController textEditingController;
      final TextInputType textInputType;
      final String hintText;
      final int maxLength;
      final TextAlign textAlign;
      const CustomTextField({
        this.maxLength,
        this.hintText,
        this.textInputType,
        this.textEditingController,
        this.width,
        this.textAlign = TextAlign.center,
      });
      @override
      Widget build(BuildContext context) {
        return Container(
          width: Dimensions.boxWidth * width,
          child: TextFormField(
            textAlign: textAlign,
            controller: textEditingController,
            keyboardType: textInputType,
            maxLength: maxLength,
            decoration: InputDecoration(
              hintText: hintText,
              border: OutlineInputBorder(
                borderRadius: BorderRadius.circular(5),
              ),
            ),
          ),
        );
      }
    }

Create a title text widget:

Text(
      "Enter your phone number",
      style: TextStyle(
        color: Colors.black,
        fontSize: 20,
        fontWeight: FontWeight.bold,
      ),
      textAlign: TextAlign.center,
    ),

Create country code and phone number text field widgets:

Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        CustomTextField(
          width: 20,
          maxLength: 3,
          hintText: "+91",
          textEditingController: _countryCodeController,
          textInputType: TextInputType.phone,
        ),
        SizedBox(
          width: Dimensions.boxWidth * 5,
        ),
        CustomTextField(
          width: 60,
          maxLength: 10,
          hintText: "Phone Number",
          textEditingController: _phoneController,
          textInputType: TextInputType.phone,
        )
      ],
    ),

Create the message text field:

CustomTextField(
      width: 100,
      hintText: "Message",
      textEditingController: _messageController,
      textInputType: TextInputType.text,
      textAlign: TextAlign.start,
    ),

Build a material button to trigger the WhatsApp API.

GestureDetector(
      onTap: () {},
      child: Container(
          height: Dimensions.boxHeight * 6,
          width: Dimensions.boxWidth * 40,
          padding: EdgeInsets.all(10),
          decoration: BoxDecoration(
          color: Colors.green.shade800,
          borderRadius: BorderRadius.circular(5),
        ),
        child: Center(
          child: Text(
            "Open WhatsApp",
            style: TextStyle(
            color: Colors.white,
            fontSize: 14,
            fontWeight: FontWeight.w600,
            ),
          ),
        ),
      ),
    ),

Trigger the API on the button pressed:

onTap: () async {
      //To remove the keyboard when button is pressed
      FocusManager.instance.primaryFocus?.unfocus();
       
      var whatsappUrl =
          "whatsapp://send?phone=${_countryCodeController.text + _phoneController.text}" +
              "&text=${Uri.encodeComponent(_messageController.text)}";
      try {
        launch(whatsappUrl);
      } catch (e) {
        //To handle error and display error message
        Helper.errorSnackBar(
            context: context, message: "Unable to open whatsapp");
      }
    },

APK Link:

https://play.google.com/store/apps/details?id=com.candelalabs.devbytes&referrer=WnY5B0n9&utm_source=app

Flutter What Chat - Apps on Google Play

Thanks for reading this article ❤

If I got something wrong? Let me know in the comments. I would love to improve.

Clap 👏 If this article helps you.

If we got something wrong? Let me know in the comments. we would love to improve.