How to send email from Flutter Application
For sending emails, we usually use Email Service from backend but if you are working on a small application or you don’t have knowledge of backend, so you don't have to worry about sending email because Flutter mailer is here for you to set up your SMTP from frontend. In this tutorial, we will see how to send email from Flutter application.
First we will create an app and create very basic UI.
import 'package:flutter/material.dart';
class HomePage extends StatelessWidget {
const HomePage({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Flutter Mailer"),
),
body: Center(
child: ElevatedButton(
onPressed: () {
},
child: Text("Send Email")),
),
);
}
}
Now we will add Mailer package.
flutter pub add mailer
Package Link: https://pub.dev/packages/mailer
Platform Setup: This package doesn’t require any setup
Note: For sending emails through mailer, we have to give the email and password in the code. So don’t reveal this code block in your public repo.
For the password, it will not accept our usual password, instead of that, we will generate App Password from google account.
Create & use App Passwords
If you use 2-Step-Verification and get a “password incorrect” error when you sign in, you can try to use an App Password.
- Go to your Google Account.
- Select Security.
- Under “Signing in to Google,” select App Passwords. You may need to sign in. If you don’t have this option, it might be because:
a) 2-Step Verification is not set up for your account.
b) 2-Step Verification is only set up for security keys.
c) Your account is through work, school, or other organization.
d) You turned on Advanced Protection.
4. At the bottom, choose Select app and choose the app you using Select device and choose the device you’re using. For flutter application, you can select other option and give name of your app.
5. Follow the instructions to enter the App Password. The App Password is the 16-character code in the yellow bar on your device.
6. Tap Done.
Tip: Most of the time, you’ll only have to enter an App Password once per app or device, so don’t worry about memorizing it.
Function For Sending Email
We will create this function that will send email from out application
import 'dart:io';
import 'package:flutter/material.dart';
import 'package:mailer/mailer.dart';
import 'package:mailer/smtp_server/gmail.dart';
sendEmail(BuildContext context //For showing snackbar
) async {
String username = 'abc@gmail.com'; //Your Email
String password =
'****************'; // 16 Digits App Password Generated From Google Account
final smtpServer = gmail(username, password);
// Use the SmtpServer class to configure an SMTP server:
// final smtpServer = SmtpServer('smtp.domain.com');
// See the named arguments of SmtpServer for further configuration
// options.
// Create our message.
final message = Message()
..from = Address(username, 'Ahmed Usman')
..recipients.add('recipient-email@gmail.com')
// ..ccRecipients.addAll(['abc@gmail.com', 'xyz@gmail.com']) // For Adding Multiple Recipients
// ..bccRecipients.add(Address('a@gmail.com')) For Binding Carbon Copy of Sent Email
..subject = 'Mail from Mailer'
..text = 'Hello dear, I am sending you email from Flutter application'
// ..html = "<h1>Test</h1>\n<p>Hey! Here's some HTML content</p>"; // For Adding Html in email
// ..attachments = [
// FileAttachment(File('image.png')) //For Adding Attachments
// ..location = Location.inline
// ..cid = '<myimg@3.141>'
// ]
;
try {
final sendReport = await send(message, smtpServer);
print('Message sent: ' + sendReport.toString());
ScaffoldMessenger.of(context)
.showSnackBar(SnackBar(content: Text("Mail Send Successfully")));
} on MailerException catch (e) {
print('Message not sent.');
print(e.message);
for (var p in e.problems) {
print('Problem: ${p.code}: ${p.msg}');
}
}
}
Bu using this function, you have successfully sent email from your Flutter application.
For source code, check this repo:
If you have any query, feel free to ask me.
Linked In Url: https://www.linkedin.com/in/syedahmedusman2/