Hello Flutter Friends. Today I will share with you how to open WhatsApp when you tap a button in Flutter. With its help you can open WhatsApp by directly tapping on the button.
In the dynamic world of mobile app development, Flutter stands out as a powerful framework for crafting stunning and efficient applications. Imagine a seamless user experience where a simple tap on a button effortlessly opens WhatsApp, the globally beloved messaging app. With Flutter's versatility and user-friendly interface, integrating this feature becomes a breeze for developers. Elevate your app's functionality by incorporating the "Tap Button Open WhatsApp" feature, providing users with quick access to their preferred communication platform. This innovative integration enhances user convenience and showcases your app's commitment to staying at the forefront of technology trends. As the digital landscape evolves, embrace the synergy of Flutter and WhatsApp to create a compelling user journey. Stay ahead in the competitive app market, captivate your audience, and redefine user engagement with this cutting-edge integration. Experience the future of app development with the seamless fusion of Flutter and WhatsApp – a winning combination for the modern mobile experience.
Install the package to your flutter app:
Edit your dependencies in your pubspec.yaml file:
url_launcher: ^6.2.3Use Letest Depandancy:- link
Add the following line to your dart file:
import 'package:url_launcher/url_launcher.dart';
Now url_launcher provides us with a 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");
}
},
0 Comments
Hello there! Your Flutter form submission is impeccable. The way you've seamlessly integrated form fields and handled user input showcases your mastery of Flutter's capabilities. The user experience is smooth, thanks to your thoughtful design and validation logic.
The form's visual appeal is on point, with a clean and intuitive layout that ensures users can easily interact with it. Error handling is impressive too, as it gracefully guides users through any mistakes they might make during input.
Overall, your Flutter form demonstrates your commitment to creating user-friendly and aesthetically pleasing applications. Keep up the excellent work!