Send Emails in Flutter
This blog will explore the Send Emails in Flutter. We will learn how to execute a demo program. We will show how to send emails using the flutter_email_sender package in your Flutter applications.
For Send Emails:
flutter_email_sender | Flutter package
Allows to send emails from Flutter using native platform functionality.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:
In Flutter you can easily permit the user to send emails from your application. The methodology that will be discussed here, makes use of the accessible email clients from the user’s devices.
Thus, you don’t have to set up a Simple Mail Transfer Convention (SMTP) client. It allows sending emails from Flutter using a native platform. In Android, it opens the default mail application using intent. In iOS MFMailComposeViewController is used to compose an email.
The below demo video shows how to implement Send Emails in Flutter and how to send email will work using the flutter_email_sender package in your Flutter applications. 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
flutter_email_sender: ^6.0.3
Step 2: Import
import 'package:flutter_email_sender/flutter_email_sender.dart';
Step 3: Run flutter packages get in the root directory of your app.
Step 4: We must also add the following intent to allow our application to send emails on Android. This can be done inside the android\app\src\main\AndroidManifest.xml file.
<queries>
<intent>
<action android:name="android.intent.action.SENDTO" />
<data android:scheme="mailto" />
</intent>
</queries>
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 main. dart file, we will create a HomePage class. In this class, we will add a floatingActionButton widget. In this widget, we will add backgroundColor was blueAccent, add an email icon with white color on its child method, and add the onPressed function.
floatingActionButton: FloatingActionButton(
backgroundColor: Colors.blueAccent,
child: const Icon(
Icons.mail_outline,
color: Colors.white,
),
onPressed: () async => FlutterEmailSender.send(
Email(
body: 'I would like to request more information.',
recipients: ['user@gmail.com'],
subject: 'Information request',
bcc: ['test@gmail.com'],
cc: ['support@gmail.com'],
),
).then(
(_) => ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(
backgroundColor: Colors.blueAccent,
content: Text(
'The email has either been sent or you navigated back using the back button.',
textAlign: TextAlign.center,
style: TextStyle(fontSize: 16),
),
),
),
),
),
In this function, we will add the FlutterEmailSender.send() method. In this method, we will add an Email function. Inside this function, we will add body, recipients, subject, bcc, and cc. Also, we will add SnackBar() for using navigated back or sent email.
When we run the application, we ought to get the screen’s output like the underneath screen capture.
Code File:
import 'package:flutter/material.dart';
import 'package:flutter_email_sende/splash_screen.dart';
import 'package:flutter_email_sender/flutter_email_sender.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return const MaterialApp(
debugShowCheckedModeBanner: false,
home: Splash(),
);
}
}
class HomePage extends StatelessWidget {
const HomePage({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Flutter Send Emails Demo'),
backgroundColor: Colors.cyan,
automaticallyImplyLeading: false,
centerTitle: true,
),
body: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Center(child: Image.asset("assets/logo.png",height: 100,))
],
),
floatingActionButton: FloatingActionButton(
backgroundColor: Colors.blueAccent,
child: const Icon(
Icons.mail_outline,
color: Colors.white,
),
onPressed: () async => FlutterEmailSender.send(
Email(
body: 'I would like to request more information.',
recipients: ['user@gmail.com'],
subject: 'Information request',
bcc: ['test@gmail.com'],
cc: ['support@gmail.com'],
),
).then(
(_) => ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(
backgroundColor: Colors.blueAccent,
content: Text(
'The email has either been sent or you navigated back using the back button.',
textAlign: TextAlign.center,
style: TextStyle(fontSize: 16),
),
),
),
),
),
);
}
}
Conclusion:
In the article, I have explained the Send Emails in a flutter; you can modify this code according to your choice. This was a small introduction to Send Emails On User Interaction from my side, and it’s working using Flutter.
I hope this blog will provide you with sufficient information on Trying the Send Emails in your Flutter projects. We will show you what the Introduction is. Make a demo program for working on Send Emails Using the flutter_email_sender package in your Flutter applications. So please try it.
❤ ❤ 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.
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.
