Sending an email using FlutterFlow and SendGrid

a month ago   •   6 min read

By Souvik Biswas
Table of contents

Overview

Whether you are a solo developer or a large business, email is one of the most reliable ways to connect with your users. Traditionally, it was required to maintain email servers for sending emails, but nowadays, you can easily access an email delivery service.

SendGrid is one of the most popular platforms that provide SMTP (Simple Mail Transfer Protocol) service through a hassle-less API.

This post will walk you through setting up the SendGrid Email API inside FlutterFlow and using it to send emails to your users!

NOTE: You should be on the Pro Plan of FlutterFlow to use Custom APIs.

Setup a SendGrid account

To access the SendGrid Email API service, you need an API key.

Follow the steps below to generate a SendGrid API key:

1. Create a SendGrid account by going to this page. Fill up any necessary information required for getting access to your account.

SendGrid create account page

2. Once your account creation is complete, you will be navigated to the dashboard page.

3. From the left menu, expand Settings and select API Keys.

SendGrid dashboard with instructions for navigating to the API Keys page

4. On the API Keys page, click Create API Key.

SendGrid API Keys page with Create API Key button highlighted

5. Enter an API Key Name, and select the API Key Permission as Restricted Access. Under Access Details, expand Mail Send and give Full Access to Mail Send. Click Create & View.

Creating a new SendGrid API Key

6. Click on the generated API Key to copy it and store it in a secure place. Click Done.

Copying the generated API Key

There's one more thing that you need to configure, Sender Authentication. It is required before you can start sending any emails.

There are two methods; you can choose either one of them:

Both have their advantages. Learn more by going to their respective links. For simplicity, we'll go with the Single Sender Verification method in this article (you can shift to the Domain Authentication method anytime).

1. Go to Settings > Sender Authentication.

Navigating to the Sender Authentication page from the SendGrid dashboard

2. On the Sender Authentication page, click Get Started beside Single Sender Verification.

Sender Authentication page with Get Started button highlighted

3. Fill in the required sender details. The email you enter in the From Email Address field will be used to send emails to your users. Click Create.

Form for filling in the sender details while adding a new sender to SendGrid

You will receive a verification email on the email address you used as the From Address. Once you verify that, you are ready to start sending emails.

Create email sending UI

Let's create a basic user interface inside FlutterFlow for sending an email. It will just consist of two screens:

  • SendEmailPage: A form to accept the essential information to be used in the email and a button to trigger the sending process.
  • EmailSentPage: Users will be navigated to this page once an email is sent successfully. It will just consist of a Text widget.

Send Email Page

This page consists of a From widget. Inside, there are three TextField widgets for accepting the user inputs for email address, subject, and content of the email, respectively. A Button widget is also present to trigger the API Call for sending an email that we'll be defining in the next section.

Widget Tree for the SendEmailPage on FlutterFlow

Email Sent Page

Once an email is successfully sent, we'll navigate the user to this page. It's a simple page containing just a centered Text widget and an IconButton in the app to navigate back to the previous page.

Widget Tree for the EmailSentPage on FlutterFlow

Define an API Call

Let's define the API call required for sending emails.

1. Go to API Calls from the left menu.

FlutterFlow UI Builder with the API Calls option highlighted

2. On the API Calls page, click Add API Call.

API Calls page with Add API Call button highlighted

3. Enter an API Call Name (e.g. sendEmail), select the Method Type as POST, and enter the API URL as https://api.sendgrid.com/v3/mail/send.

Adding an API Call by entering the respective values in the fields

4. Add a single Header by clicking on the Add Header button:
- Name: Authorization
- Value: Bearer <api_key>.
Use the SendGrid API Key that you generated earlier.

Adding an API Call header by providing a name and value
💡
You can use variables, which you can set during the API call, in header values. Use square brackets to set a variable. For example:
Bearer [sendGridApiKey]

5. Add the following variables by clicking on the Add Variable button:
- Name: toEmail, Value Type: String
- Name: subject, Value Type: String
- Name: content, Value Type: String
You can add more variables if you require.

Showing the varibles that are to be defined for the API Call

6. Choose the Body as JSON and add the following to the field:

{
  "personalizations": [
    {
      "to": [
        {
          "email": "<enter_to_email>"
        }
      ],
      "subject": "<enter_to_subject>"
    }
  ],
  "content": [
    {
      "type": "text/plain",
      "value": "<enter_content>"
    }
  ],
  "from": {
    "email": "<enter_from_email>",
    "name": "<enter_from_name>"
  },
  "reply_to": {
    "email": "<enter_reply_to_email>",
    "name": "<enter_reply_to_name>"
  }
}

7. To use the variables, you can just drag and drop them in their respective places.

Using the variables inside the JSON by dragging and dropping them to respective places
Replace the rest of the angle brackets (from and reply_to) with their respective values.

8. Click Add Call.

Newly added send email API call is highlighted

Trigger the API Call

You are now ready to use the sendEmail API call. To trigger the API call, you need to define an Action.

⚠️
Before proceeding, make sure you specify a unique name to each of the TextField widgets. This will make it easier to identify the TextField(s) while passing them as parameters.

Follow the steps below:

  1. Go to the SendEmailPage and select the Button widget.
  2. From the Properties panel (the right menu), click + Add under the Actions section.
  3. Choose On Tap as the gesture among the tabs present on the top.
  4. Click + Add Action.
  5. Select the action as API Call (present under Backend/Database).
  6. Choose the Call Name as sendEmail.
  7. Click + Parameter to define the values for the parameters that you had specified while adding the API call:
    1. Select a Parameter Name from the dropdown list.
    2. Choose the Value Source as From Variable.
    3. Select Source as the Widget State.
    4. Under Available Options, select the respective TextField name.
    5. Repeat steps 1 to 4 for defining the rest of the parameters.
  8. Once you have defined all the required parameters, click Close.
Adding an Action to trigger the send email API Call

We want the user to be navigated to the EmailSentPage if the email is sent successfully. Otherwise, show a SnackBar with an error message.

You'll need to add a Condition after the API Call Action. Follow the steps below:

  1. Select the same Button widget.
  2. From the Properties panel, click Edit under the Actions section.
  3. Make sure the On Tap gesture is selected, select the API Call action, and add the Output Variable Name as emailSentResponse.
  4. Click on the "+" button below the API Call action tile, and select Add Conditional.
  5. Select the Source as Action Outputs, from Available Options select emailSentResponse, and under the Response Options choose Succeeded.
  6. Under TRUE condition, click "+" button, and select Add Action. Select the Action as Navigate To and choose the EmailSentPage from the dropdown menu.
  7. Under FALSE condition, click "+" button, and select Add Action. Select the Action as Show Snack Bar and enter the value as "Failed to send email".
  8. Click Close.
Adding a condition after the send email API call to navigate to the "email sent page" if it's successful, otherwise, show a snackbar

Email sending in action

You can try out whether the email sending is working correctly by running the app either using the Run mode (recommended) or by downloading the project and running it on your system.

NOTE: To download and run the app on your system, you need to have Flutter SDK installed.
Demo of the email sending process, running on an iOS Simulator

If you check the email inbox, you should see the email sent using SendGrid:

Sample email sent from the app to the email address "souvik@flutterflow.io" having "Welcome" as the subject and "This is the first email using SendGrid!" as the content

References

Check out the following pages for more information regarding the concepts used in this blog post:

Spread the word