How to Send Emails Programmatically in Your Flutter Projects

As a Flutter developer, adding email functionality to your app can be a game-changer for user communication. Whether it's sending feedback, sharing updates, or facilitating interactions, emails are an essential part of creating a smooth user experience. But how do you integrate this feature without overcomplicating your code?

In this guide, we’ll walk you through practical ways to send emails from your Flutter app—whether through the user's default mail app or by sending emails programmatically using the Mailer package. By the end of this tutorial, you’ll have the skills to seamlessly implement email functionality in your Flutter projects and level up your app's communication features.

Setting Up the Flutter Project

To get started, ensure Flutter SDK is installed, and your development environment is set up. If you haven't already, follow the official Flutter documentation to set up Flutter on your machine. Once done, you can create a new Flutter project using the following steps:

1. Open your terminal or command prompt.
2. Run the command flutter create my_app (replace my_app with your desired project name).
3. Wait for Flutter to generate the project files.

Sending Email Using Default Mail App

Sending emails using the default mail app provides a seamless user experience as it leverages the user's preferred email client. This approach is suitable for cases where you want to allow users to compose and send emails using their email accounts. Let's explore how to enable this functionality within your Flutter app.

Working with the Default Mail App

You can utilize the url_launcher package in Flutter to leverage the default mail app. This package provides a simple way to open the default mail app with pre-filled email details. Here's how you can incorporate it into your application:

1. Add the url_launcher package to your pubspec.yaml file:

   1dependencies:
   2  flutter:
   3    sdk: flutter
   4  url_launcher: ^6.0.0

Run the flutter pub get command to fetch the package.

2. Import the url_launcher package into your Dart file:

   1import 'package:url_launcher/url_launcher.dart';

3. Use the launch function to open the default mail app:

   1Future<void> sendEmail() async {
   2  final Uri emailUri = Uri(
   3    scheme: 'mailto',
   4    path: 'example@email.com',
   5    queryParameters: {'subject': 'Hello from Flutter!'},
   6  );
   7
   8  if (await canLaunch(emailUri.toString())) {
   9    await launch(emailUri.toString());
   10  } else {
   11    throw 'Could not launch email app';
   12  }
   13}

This example demonstrates how to open the default mail app with a pre-defined recipient and subject. Feel free to customize the parameters to suit your app's requirements.

Sending Email Programmatically

In addition to opening the default mail app, you may need to send emails programmatically, without relying on the user's manual input. The Mailer package in Flutter provides a powerful solution for sending emails directly from your application. Let's explore how to incorporate this functionality into your Flutter app.

Introduction to Mailer Package

The Mailer package is a widely used solution for sending emails programmatically in Flutter. It provides a simple API for creating and sending email messages using popular email protocols like SMTP. To use the Mailer package, you need to add it as a dependency in your Flutter project.

Here's how you can add the Mailer package to your pubspec.yaml file:

1dependencies:
2  flutter:
3    sdk: flutter
4  mailer: ^5.1.0

After adding the package, run flutter pub get to fetch it.

Creating an Email Message

To send an email using the Mailer package, you must create an Email object representing the email message. This object lets you define the email's recipients, subject, body, and attachments. Let's see an example:

1import 'package:mailer/mailer.dart';
2import 'package:mailer/smtp_server.dart';
3
4Future<void> sendEmail() async {
5  final smtpServer = SmtpServer('<your_smtp_server>',
6      username: '<your_username>', password: '<your_password>');
7
8  final message = Message()
9    ..from = Address('<your_email_address>', '<your_name>')
10    ..recipients.add('<recipient_email_address>')
11    ..subject = 'Hello from Flutter!'
12    ..text = 'This is the plain text body of the email.'
13    ..html = '<h1>HTML body of the email</h1>';
14
15  try {
16    final sendReport = await send(message, smtpServer);
17    print('Message sent: ${sendReport.sent}');
18  } catch (e) {
19    print('Error occurred while sending email: $e');
20  }
21}

In this example, you need to replace <your_smtp_server>, <your_username>, <your_password>, <your_email_address>, and <recipient_email_address> with your own SMTP server details and email addresses.

Sending Email

To send the email message using the Mailer package, you must connect to the SMTP server and authenticate using your credentials. Once authenticated, you can send the message using the send function. The send function returns a Future<SendReport> that provides information about the success or failure of the sending operation.

It's important to note that sending emails programmatically requires a valid SMTP server. You can use popular email service providers like Gmail, Outlook, or write your own custom SMTP server.

Implementing Email Functionality in a Flutter App

Now that you have learned different methods of sending emails from Flutter applications, let's discuss how to implement email functionality in your app.

Integrating Email Sending Functionality

To integrate email sending functionality into your Flutter app, you must create a widget where users can compose their email. Here's an example of how you can accomplish this:

1import 'package:flutter/material.dart';
2import 'package:mailer/mailer.dart';
3import 'package:mailer/smtp_server.dart';
4
5class EmailComposer extends StatefulWidget {
6  @override
7  _EmailComposerState createState() => _EmailComposerState();
8}
9
10class _EmailComposerState extends State<EmailComposer> {
11  final TextEditingController _toController = TextEditingController();
12  final TextEditingController _subjectController = TextEditingController();
13  final TextEditingController _bodyController = TextEditingController();
14
15  Future<void> sendEmail() async {
16    final smtpServer = SmtpServer('<your_smtp_server>',
17        username: '<your_username>', password: '<your_password>');
18
19    final message = Message()
20      ..from = Address('<your_email_address>', '<your_name>')
21      ..recipients.add(_toController.text)
22      ..subject = _subjectController.text
23      ..text = _bodyController.text;
24
25    try {
26      final sendReport = await send(message, smtpServer);
27      print('Message sent: ${sendReport.sent}');
28      // Additional code for feedback to the user
29    } catch (e) {
30      print('Error occurred while sending email: $e');
31      // Additional code for error handling
32    }
33  }
34
35  @override
36  Widget build(BuildContext context) {
37    return Scaffold(
38      appBar: AppBar(
39        title: Text('Compose Email'),
40      ),
41      body: Padding(
42        padding: EdgeInsets.all(16.0),
43        child: Column(
44          children: [
45            TextField(
46              controller: _toController,
47              decoration: InputDecoration(
48                labelText: 'To',
49              ),
50            ),
51            TextField(
52              controller: _subjectController,
53              decoration: InputDecoration(
54                labelText: 'Subject',
55              ),
56            ),
57            TextField(
58              controller: _bodyController,
59              maxLines: null,
60              keyboardType: TextInputType.multiline,
61              decoration: InputDecoration(
62                labelText: 'Body',
63              ),
64            ),
65            ElevatedButton(
66              onPressed: sendEmail,
67              child: Text('Send Email'),
68            ),
69          ],
70        ),
71      ),
72    );
73  }
74}

In this example, you can create a form where users can enter the recipient's email address, subject, and body of the email. When the "Send Email" button is pressed, the sendEmail function is called to send the email using the Mailer package. You can customize the UI and add additional features as per your app's requirements.

User Experience Considerations

When implementing email functionality in your Flutter app, it's essential to consider the user experience. Here are a few recommendations to ensure a seamless and user-friendly experience:

• Provide clear and intuitive UI elements for composing emails, such as text fields for recipients, subject, and body.
• Consider validating user inputs before sending the email for better data integrity.
• Implement proper error handling to inform users if an error occurs during the sending process.
• Display visual feedback, such as a loading indicator, while the email is sent to keep the user informed.
• Test your email functionality thoroughly across different devices and email providers to ensure compatibility.

With these key considerations, you can create an integrated email experience within your Flutter app, enhancing communication and user engagement.

Wrapping Up: Seamless Email Integration in Flutter

Integrating email functionality into your Flutter app is more than just a technical addition—it’s a powerful tool to streamline communication and enhance the overall user experience. Throughout this tutorial, we’ve explored two robust methods for sending emails: using the default mail app for a seamless user interface, and the Mailer package for direct, programmatic email sending. These approaches open up endless possibilities for building apps that keep users connected and engaged.

By customizing the provided code snippets to match your SMTP details and project requirements, you can quickly incorporate email features into your apps. With the knowledge and techniques gained here, you’re now equipped to create more interactive and communicative Flutter applications. Now, it’s time to put your skills into action! Start implementing email functionality and bring your Flutter projects to the next level. Happy coding, and may your apps always stay connected!

Short on time? Speed things up with DhiWise!

Tired of manually designing screens, coding on weekends, and technical debt? Let DhiWise handle it for you!

You can build an e-commerce store, healthcare app, portfolio, blogging website, social media or admin panel right away. Use our library of 40+ pre-built free templates to create your first application using DhiWise.