In this article, we will explore the Flutter — Email Launcher. We see how to execute a demo program. We will tell you the best way to open the default email application with email ID, body, and subject utilizing the url_launcher package, and how to work it in your Flutter applications.
- For URL Launcher:
url_launcher | Flutter Package
Flutter plugin for launching a URL. Supports web, phone, SMS, and email schemes.pub.dev
If you’re looking for the best Flutter app development company for your mobile application then feel free to contact us at — support@flutterdevs.com.
Table Of Contents::
Introduction:
The below demo video shows how to open Email Launcher in Flutter and how Email Launcher will work using the url_launcher plugin in your Flutter applications. We will show you how to open default email applications with email ID, body, and subject. when the user taps on the button, then they will navigate to the default email app with email ID, body, and subject. It will be shown on your device.
Demo Module::
Implementation:
Step 1: Add the dependencies
Add dependencies to pubspec — yaml file.
dependencies:
flutter:
sdk: flutter
url_launcher: ^6.2.2Step 2: Import
import 'package:url_launcher/url_launcher.dart';Step 3: Run flutter packages get in the root directory of your app.
How to implement code in dart file :
You need to implement it in your code respectively:
Create a new dart file called main.dart inside the lib folder.
In the main .dart file. We will create a new class MyHomePage(). In this class, we will add the Center widget in the body part. In this widget, we will add a Column widget with mainAxisAlignment as the center.
Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Image.asset(
'assets/logo.png',
height: heightSize * 0.15,
),
SizedBox(
height: heightSize * 0.15,
),
ElevatedButton(
onPressed: () => _email(),
style: ElevatedButton.styleFrom(
padding: EdgeInsets.only(
left: widthSize * 0.1, right: widthSize * 0.1),
textStyle:
const TextStyle(fontSize: 19, fontStyle: FontStyle.normal),
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(30))),
),
child: const Text('Send Email'),
),
],
),
),Inside the column, we will add an image with height and ElevatedButton().In this button, we will add the onPressed function. In this function, we will navigate the _email() method. This method we will define below with code. Also, we will add style and its child we will add ‘Send Email’ text.
When we run the application, we ought to get the screen’s output like the underneath screen capture.
Now, we will define _email() method:
In this method, when users press the button then they will open the default mobile email applications. In this method, we will declare an async and add three Strings email, subject, and body.
void _email() async {
String email = Uri.encodeComponent("test@aeologic.com");
String subject = Uri.encodeComponent("Hello Flutter Dev's");
String body = Uri.encodeComponent(
"Hi! I'm Flutter Developer. This is a Email launcher demo testing.");
if (kDebugMode) {
print(subject);
print(email);
print(body);
}
var url = Uri.parse("mailto:$email?subject=$subject&body=$body");
if (await canLaunchUrl(url)) {
await launchUrl(url);
} else {
throw 'Could not launch $url';
}
}
The fundamental email ID, subject, and body are assigned as a string to the “url” variable. The application is told to send off the mobile’s default mailing application by the grammar “mailto:”. After that enter the email id, subject, and body determined in the “url” variable in the “To”, “Body”, and “Subject” areas. To guarantee that the variable is never changed, it is pronounced as a “const.”
The URL is possibly launched assuming it is feasible to do as such, in which case it is called by passing the URL variable. Also a contention to the launch() capability. Otherwise, it will throw/print a message with the url value, as an error message.
When we run the application, we ought to get the screen’s output like the underneath screen capture.
Code File:
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter_email_launcher_demo/splash_screen.dart';
import 'package:url_launcher/url_launcher.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
useMaterial3: true,
),
debugShowCheckedModeBanner: false,
home: const Splash(),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key, required this.title});
final String title;
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
void _email() async {
String email = Uri.encodeComponent("test@aeologic.com");
String subject = Uri.encodeComponent("Hello Flutter Dev's");
String body = Uri.encodeComponent(
"Hi! I'm Flutter Developer. This is a Email launcher demo testing.");
if (kDebugMode) {
print(subject);
print(email);
print(body);
}
var url = Uri.parse("mailto:$email?subject=$subject&body=$body");
if (await canLaunchUrl(url)) {
await launchUrl(url);
} else {
throw 'Could not launch $url';
}
}
@override
Widget build(BuildContext context) {
var heightSize = MediaQuery.of(context).size.height;
var widthSize = MediaQuery.of(context).size.width;
return Scaffold(
appBar: AppBar(
backgroundColor: Theme.of(context).colorScheme.inversePrimary,
centerTitle: true,
automaticallyImplyLeading: false,
title: Text(
widget.title,
style: const TextStyle(fontSize: 20),
),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Image.asset(
'assets/logo.png',
height: heightSize * 0.15,
),
SizedBox(
height: heightSize * 0.15,
),
ElevatedButton(
onPressed: () => _email(),
style: ElevatedButton.styleFrom(
padding: EdgeInsets.only(
left: widthSize * 0.1, right: widthSize * 0.1),
textStyle:
const TextStyle(fontSize: 19, fontStyle: FontStyle.normal),
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(30))),
),
child: const Text('Send Email'),
),
],
),
),
);
}
}
Conclusion:
In the article, I have explained the Email Launcher in Flutter; you can modify this code according to your choice. This was a small introduction to the Email Launcher in Flutter User Interaction from my side, and it’s working using Flutter.
I hope this blog will provide you with sufficient information on Trying Email Launcher in your Flutter projects. We will show you what the Introduction is. Make a demo program for working on Email Launcher using the url_launcher plugin in your Flutter applications. So please try it.
❤ ❤ Thanks for reading this article ❤❤
If I need to correct something? Let me know in the comments. I would love to improve.
Clap 👏 If this article helps you.
Feel free to connect with us:
And read more articles from FlutterDevs.com.
FlutterDevs team of Flutter developers to build high-quality and functionally rich apps. Hire a Flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! For any flutter-related queries, you can connect with us on Facebook, GitHub, Twitter, and LinkedIn.
We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.
