How to trigger an email on database update in Flutter with SendGrid
Tags: flutter, sendgrid, dart, mobileapp
Published: 2022-11-24 09:33:17

---
title: How to trigger an email on database update in Flutter with SendGrid
published: true
description: Learn how to use Appwrite Function and SendGrid to trigger an email when a database is updated in Flutter.
tags: #flutter #sendgrid #dart #mobileApp
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ioxhhsc7e5iajmga8hys.png
# Use a ratio of 100:42 for best results.
# published_at: 2022-11-24 08:21 +0000
---

Email is a medium of communication used to send and receive electronic-based files like text documents, photos, videos, etc. Beyond the traditional use case, it has become an essential tool used by developers to monitor and communicate their applications' status.

In this post, we will learn how to use Appwrite Function and SendGrid to trigger an email when a database is updated in Flutter.

## Technology overview

[Appwrite Function](https://appwrite.io/docs/functions?utm_source=hackmamba&utm_medium=hackmamba-blog) is a service that lets us use Appwrite server functionality by executing a custom code using a language of choice like Node.js, Python, PHP, Dart, or Java.

[SendGrid](https://sendgrid.com/) is a cloud-based email marketing tool developers and marketers use to manage mailing lists, A/B testing, predefined templates, and image libraries used in campaign management and audience engagement.

## GitHub links

The project source codes are below:

- [Appwrite Function with Dart](https://github.com/Mr-Malomz/appwrite_sendgrid)
- [Flutter App](https://github.com/Mr-Malomz/flutter_sendgrid)

## Prerequisites

To follow along in this tutorial, the following requirements apply:

- Basic understanding of Dart and Flutter
- Flutter [SDK](https://flutter.dev/docs/get-started/install) installed
- [Appwrite CLI](https://appwrite.io/docs/command-line?utm_source=hackmamba&utm_medium=hackmamba-blog) installed
- [Xcode](https://developer.apple.com/xcode/) with a developer account (for Mac users)
- Either [IOS Simulator](https://developer.apple.com/xcode/), [Android Studio](https://developer.android.com/studio), or [Chrome web browser](https://support.google.com/chrome/answer/95346?hl=en-GB&co=GENIE.Platform%3DDesktop) to run our application
- An Appwrite instance; check out this [article](https://dev.to/hackmamba/create-a-local-appwrite-instance-in-3-steps-19n9?utm_source=hackmamba&utm_medium=hackmamba) on how to set up an instance locally or one-click install on [DigitalOcean](https://marketplace.digitalocean.com/apps/appwrite) or [Gitpod](https://gitpod.io/#https://github.com/appwrite/integration-for-gitpod)
- A SendGrid account; [**s**](https://marketplace.zoom.us/)[**ignup**](https://signup.sendgrid.com/) for a trial account is completely free

## Set up SendGrid as an email provider

To get started, we need to log into our Sendgrid account and create a sender identity for sending emails. To do this, click the **Create a Single Sender** button and fill in the required details.

![Click on single sender](https://paper-attachments.dropboxusercontent.com/s_D82BCAF4FA806DDC66086296DB729575AF10BA7E5A187F3ABEBD28438E2912BE_1666296398440_Screenshot+2022-10-19+at+11.47.25.png)
![Fill details](https://paper-attachments.dropboxusercontent.com/s_D82BCAF4FA806DDC66086296DB729575AF10BA7E5A187F3ABEBD28438E2912BE_1666296483446_Screenshot+2022-10-19+at+11.50.25.png)


We will also be required to verify the email filled in as the sender's identity.

Next, we need to create an API Key to securely access our SendGrid account and send emails from a client. To do this, navigate to the **API Key** tab under the **Settings** menu and click the **Create API Key** button.

![Create API Key](https://paper-attachments.dropboxusercontent.com/s_D82BCAF4FA806DDC66086296DB729575AF10BA7E5A187F3ABEBD28438E2912BE_1666296749691_Screenshot+2022-10-19+at+11.56.26.png)


Input `appwrite_sendgrid` as the API Key Name and click the **Create & View** button.


![Input detail and create](https://paper-attachments.dropboxusercontent.com/s_D82BCAF4FA806DDC66086296DB729575AF10BA7E5A187F3ABEBD28438E2912BE_1666297163301_Screenshot+2022-10-20+at+21.17.50.png)


SendGrid will generate an API Key. We need to copy and keep the generated key, as it will come in handy when setting up our Appwrite function.

## Integrate Appwrite Function with SendGrid

**Enabling Dart runtime in Appwrite**
By default, Dart is not included as part of the Appwrite runtime. To enable Dart as a supported runtime, we first need to navigate to the directory created when we installed Appwrite and edit the `.env` file by adding `dart-2.17` as shown below:


![Appwrite folder with .env file](https://paper-attachments.dropboxusercontent.com/s_D82BCAF4FA806DDC66086296DB729575AF10BA7E5A187F3ABEBD28438E2912BE_1666298051688_Screenshot+2022-10-20+at+21.32.42.png)


```bash
//remaining env variable goes here

_APP_FUNCTIONS_RUNTIMES=node-16.0,php-8.0,python-3.9,ruby-3.0,dart-2.17
```


![Updated runtime with Dart support](https://paper-attachments.dropboxusercontent.com/s_D82BCAF4FA806DDC66086296DB729575AF10BA7E5A187F3ABEBD28438E2912BE_1666298095483_Screenshot+2022-10-20+at+21.31.44.png)


Lastly, we need to sync the changes we made on the `.env` file with our Appwrite server. To do this, we must run the command below inside the `appwrite` directory.

```bash
docker compose up -d --force-recreate
```

**Create Appwrite** **p****roject**
With our Appwrite instance up and running, we can now create a project that our function will use to integrate SendGrid to send emails. To do this, we first need to navigate to the desired directory and run the command below:

```bash
mkdir appwrite_sendgrid && cd appwrite_sendgrid
```

The command creates a project folder called `appwrite_sendgrid` and navigates into the folder.

Secondly, we need to log into the Appwrite server using the CLI.

```bash
appwrite login
```

We will be prompted to input our email and password. We need to use the credentials we used to sign up to the Appwrite console.

Lastly, we need to create a new Appwrite project using the command below:

```bash
appwrite init project
```

We will be prompted with some questions on how to set up our project, and we can answer as shown below:

```bash
How would you like to start? <select "Create a new project">
What would you like to name your project? <input "appwrite_sendgrid">
What ID would you like to have for your project? (unique()) <press enter>
```

**Create** **Appwrite Function inside the** **p****roject**
With our project setup, we can proceed to create a function by running the command below:

```bash
appwrite init function
```

We will also be prompted with some questions about how to set up our function; we can answer as shown below:

```bash
What would you like to name your function? <input "appwrite_sendgrid">
What ID would you like to have for your function? (unique()) <press enter>
What runtime would you like to use? <scroll to dart-2.17 and press enter>
```

 
 The command will create a starter Dart project.

![Starter project](https://paper-attachments.dropboxusercontent.com/s_D82BCAF4FA806DDC66086296DB729575AF10BA7E5A187F3ABEBD28438E2912BE_1666302000503_Screenshot+2022-10-20+at+22.39.46.png)


Secondly, we need to install the required dependency by navigating to `pubspec.yaml` file and add SendGrid SDK to the `dependencies` section.

```bash
sendgrid_mailer: ^0.1.3
```

![Install dependency](https://paper-attachments.dropboxusercontent.com/s_D82BCAF4FA806DDC66086296DB729575AF10BA7E5A187F3ABEBD28438E2912BE_1666302629207_Screenshot+2022-10-20+at+22.48.56.png)


We also need to install the specified dependency by running the command below:

```bash
cd functions/appwrite_sendgrid/
dart pub get
```

Thirdly, we need to modify the `main.dart` file inside the `lib` folder as shown below:

```dart
import 'package:dart_appwrite/dart_appwrite.dart';
import 'package:sendgrid_mailer/sendgrid_mailer.dart';

Future<void> start(final req, final res) async {
  Client client = Client();

  final mailer = Mailer('SENDGRID API KEY');
  final toAddress = Address('SEND TO EMAIL');
  final fromAddress = Address('SENDER EMAIL CREATED ON SENDGRID');
  final content =
      Content('text/plain', 'Appwrite Database successfully updated');
  final subject = 'Database Update Alert!';
  final personalization = Personalization([toAddress]);

  final email =
      Email([personalization], fromAddress, subject, content: [content]);
  mailer.send(email).then((result) {
    print(result);
  }).catchError((onError) {
    print('error');
  });

  res.json({
    'data': "testing emails",
  });
}
```

The snippet above does the following:

- Imports the required dependencies
- Configures SendGrid mail client by specifying the **API Key**, to emails, from emails, email content, and email subject
- Sends the email using the configured client

Lastly, we need to navigate back to the project terminal and then deploy our function.

```bash
cd ../..
appwrite deploy function
```

We will also be prompted to the functions to deploy. We can select the `appwrite_sendgrid` function by pressing the **spacebar key** to mark and the **enter key to** select it.

![Sample of a deployed function](https://paper-attachments.dropboxusercontent.com/s_D82BCAF4FA806DDC66086296DB729575AF10BA7E5A187F3ABEBD28438E2912BE_1666303547918_Screenshot+2022-10-20+at+23.05.34.png)


We can also confirm the deployment by navigating to the **Function** tab on the Appwrite console,

![Deployed function](https://paper-attachments.dropboxusercontent.com/s_D82BCAF4FA806DDC66086296DB729575AF10BA7E5A187F3ABEBD28438E2912BE_1666303708660_Screenshot+2022-10-20+at+23.08.08.png)


**Add event support to Appwrite Function**
Next, we need to add an event (database update) to our Appwrite Function. The event will trigger the function anytime the database is updated. To do this, navigate to the **Settings** tab, click the **Add Event** button, and select `documents.update` option, and click the **Add Event**. Then finally, click the **Update** button to save changes.

![Click settings](https://paper-attachments.dropboxusercontent.com/s_D82BCAF4FA806DDC66086296DB729575AF10BA7E5A187F3ABEBD28438E2912BE_1666304331599_Screenshot+2022-10-19+at+16.32.52.png)
![Add Event](https://paper-attachments.dropboxusercontent.com/s_D82BCAF4FA806DDC66086296DB729575AF10BA7E5A187F3ABEBD28438E2912BE_1666304331659_Screenshot+2022-10-19+at+16.37.32.png)
![Update](https://paper-attachments.dropboxusercontent.com/s_D82BCAF4FA806DDC66086296DB729575AF10BA7E5A187F3ABEBD28438E2912BE_1666304331713_Screenshot+2022-10-19+at+16.38.41.png)



## Create a Flutter app

With our function deployed and listening for event changes on the database, we can now proceed to set up a Flutter project. 

To get started, we need to clone the project by navigating to the desired directory and running the command below:

```bash
git clone https://github.com/Mr-Malomz/flutter_sendgrid.git && cd flutter_sendgrid
```

The project logic to update a database and UI has already been set up. Below are some important files to note in the `lib` directory:

`screens/home.dart`: Contains the UI for updating a database.

`utils`: Contains Appwrite constants and Model. We will update this file shortly.

`user_service.dart`: Contains application logic for updating the database.

**Running the** **p****roject**
First, we need to install the project dependencies by running the command below:

```bash
flutter pub get
```

Then, run the project using the command below:

```bash
flutter run
```

The command above will run the application on the selected device.

![Running app](https://paper-attachments.dropboxusercontent.com/s_D82BCAF4FA806DDC66086296DB729575AF10BA7E5A187F3ABEBD28438E2912BE_1666307498718_Screenshot+2022-10-14+at+23.06.46.png)


**Create a Database and Add Sample Data**
Next, we need to create a database with the corresponding collection, document, and add sample data as shown below:

| **Name**      |
| ------------- |
| John Travolta |

![collection](https://paper-attachments.dropboxusercontent.com/s_D82BCAF4FA806DDC66086296DB729575AF10BA7E5A187F3ABEBD28438E2912BE_1666306632968_Screenshot+2022-10-20+at+23.53.44.png)


**Add Platform support**
To add support for our Flutter app, navigate to the **Home** menu, click on the **Add Platform** button, and select **New Flutter App**.

![Add platform](https://paper-attachments.dropboxusercontent.com/s_D82BCAF4FA806DDC66086296DB729575AF10BA7E5A187F3ABEBD28438E2912BE_1666306997177_Screenshot+2022-10-21+at+00.02.07.png)
![Select new Flutter app](https://paper-attachments.dropboxusercontent.com/s_D82BCAF4FA806DDC66086296DB729575AF10BA7E5A187F3ABEBD28438E2912BE_1666307005809_Screenshot+2022-10-21+at+00.02.14.png)


Depending on the device on which we are running our Flutter application, we can modify it as shown below.

**i****OS**
To obtain our Bundle ID, we can navigate using the path below:
**ios > Runner.xcodeproj > project.pbxproj**

Open the `project.pbxproj` file and search for `PRODUCT_BUNDLE_IDENTIFIER`.

![iOS](https://paper-attachments.dropboxusercontent.com/s_D82BCAF4FA806DDC66086296DB729575AF10BA7E5A187F3ABEBD28438E2912BE_1666307092697_Screenshot+2022-10-21+at+00.04.40.png)


Next, open the project directory on [Xcode](https://developer.apple.com/xcode/), open the `Runner.xcworkspace` folder in the app's iOS folder, select the **Runner** project in the Xcode project navigator, select the **Runner** target in the main menu sidebar, and then select **i****OS 11** in the deployment info’s target.

![Change deployment target](https://paper-attachments.dropboxusercontent.com/s_9C6F95223612512F2BFCBBAA719BAF62E5E51518F8EC1B3A16905A2D91336244_1650208061820_Screenshot+2022-04-17+at+16.05.22.png)


**Android**
To get our package name, we can navigate to an XML file using the path below:
**android > app > src > debug > AndroidManifest.xml**

Open the `AndroidManifest.xml` file and copy the `package` value.

![Android](https://paper-attachments.dropboxusercontent.com/s_0AD1E4FEC87D08336D65F9D73ADDB2C575D2A09652A484554594F8893D68A37E_1663412559367_Screenshot+2022-09-16+at+23.02.22.png)


Next, we need to modify the `AndroidManifext.xml` as shown below:

```xml
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.real_time_comm">
    <uses-permission android:name="android.permission.INTERNET"/>
    <application ...>
    <activity android:name="com.linusu.flutter_web_auth.CallbackActivity" android:exported="true">
      <intent-filter android:label="flutter_web_auth">
        <action android:name="android.intent.action.VIEW" />
        <category android:name="android.intent.category.DEFAULT" />
        <category android:name="android.intent.category.BROWSABLE" />
        <data android:scheme="appwrite-callback-[PROJECT_ID]" />
      </intent-filter>
    </activity>
  </application>
</manifest>
```

We also need to replace the highlighted `[PROJECT_ID]` with our actual Appwrite project ID. 

**Putting it all together**
With that done, we need to navigate to the `utils.dart`  file to add the required IDs and endpoint.

```dart
class AppConstant {
  final String databaseId = "DATABASE ID HERE";
  final String projectId = "PROEJCT ID HERE";
  final String collectionId = "COLLECTION ID";
  final String userId = "USER ID"; //this is the ID of the sample data created
  final String endpoint = "ENDPOINT";
}

class User {
  String name;

  User({required this.name});

  Map<dynamic, dynamic> toJson() {
    return {'name': name};
  }
}
```

With that done, we restart the application using the code editor or run the command below:

```bash
flutter run
```

![](https://media.giphy.com/media/e77IjfyDqwLzKbW0rW/giphy.gif)


[https://media.giphy.com/media/e77IjfyDqwLzKbW0rW/giphy.gif](https://media.giphy.com/media/e77IjfyDqwLzKbW0rW/giphy.gif)

We can validate the sent email by checking Appwrite Function log and SendGrid activity tab

![Appwrite log](https://paper-attachments.dropboxusercontent.com/s_D82BCAF4FA806DDC66086296DB729575AF10BA7E5A187F3ABEBD28438E2912BE_1666308052206_Screenshot+2022-10-20+at+00.41.03.png)
![SendGrid activity](https://paper-attachments.dropboxusercontent.com/s_D82BCAF4FA806DDC66086296DB729575AF10BA7E5A187F3ABEBD28438E2912BE_1666308052153_Screenshot+2022-10-20+at+01.11.14.png)

# Conclusion

This post discussed how to create and configure Appwrite Function to send emails using SendGrid when a database is updated. Appwrite Function allows developers to write and ship software in their language of choice.

These resources might be helpful:

- [Appwrite official documentation](https://appwrite.io/docs?utm_source=hackmamba&utm_medium=hackmamba-blog)
- [Appwrite Flutter SDK](https://appwrite.io/docs/getting-started-for-flutter?utm_source=hackmamba&utm_medium=hackmamba-blog)
- [Appwrite Function](https://appwrite.io/docs/functions?utm_source=hackmamba&utm_medium=hackmamba-blog)
- [Build a Notepad App with Flutter](https://dev.to/hackmamba/build-a-notepad-app-in-flutter-1263)