Gmail API

Open console.cloud.google.com and navigate to your Firebase project. In the left menu, click APIs & Services, then Library. Search for 'Gmail API' and click Enable. Next, click OAuth consent screen. You'll need to add the Gmail scope to your app's authorized scopes. Click Add or Remove Scopes and find `https://www.googleapis.com/auth/gmail.send` — it appears as 'Send email on your behalf'. Add it. If you want to also read inbox messages, add `https://www.googleapis.com/auth/gmail.readonly` as well. The `gmail.send` scope is classified as sensitive by Google. During development you can use it with test users (added to the Test Users list on the consent screen). Before releasing to the public, you must submit your app for Google's OAuth verification — this review process can take 1-4 weeks and requires a privacy policy URL, an explanation of why you need the scope, and a demo video. For now, add your own Google account to the Test Users list and proceed with development. Click Save and Continue through the consent screen steps.

In FlutterFlow, click Custom Code in the left navigation panel. Click + Add and choose Action. Name it 'signInWithGmailScope'. In the Dependencies field, add `google_sign_in: ^6.2.1` (verify the latest version on pub.dev). Set the Return Value to String — the action returns the OAuth access token. Paste the code below. This Custom Action signs the user in with Google, explicitly requesting the `gmail.send` scope in addition to the basic profile scopes. It returns the access token as a string. After calling this action in FlutterFlow's Action Flow Editor, store the returned value in an App State or Page State variable named `gmailAccessToken`. If the user was previously signed in without the Gmail scope, calling `signOut()` first ensures they get the full permission prompt. Custom Actions that use `google_sign_in` cannot run in FlutterFlow's web Run/Test mode — use Test on Device (Android or iOS) or download the project and run `flutter run` locally to test this step. The access token expires in approximately 1 hour — for a production app, implement token refresh logic or prompt re-sign-in when a 401 is returned from the API.

1// Custom Action: signInWithGmailScope
2// Add dependency: google_sign_in: ^6.2.1
3// Return type: String
4
5import 'package:google_sign_in/google_sign_in.dart';
6
7Future<String> signInWithGmailScope() async {
8  final GoogleSignIn googleSignIn = GoogleSignIn(
9    scopes: [
10      'email',
11      'profile',
12      'https://www.googleapis.com/auth/gmail.send',
13    ],
14  );
15
16  try {
17    await googleSignIn.signOut(); // Force re-consent to add new scope
18    final GoogleSignInAccount? account = await googleSignIn.signIn();
19    if (account == null) return '';
20
21    final GoogleSignInAuthentication auth = await account.authentication;
22    final token = auth.accessToken ?? '';
23    return token;
24  } catch (e) {
25    return '';
26  }
27}

This is the step where most FlutterFlow builders get stuck: Gmail's send endpoint does not accept a JSON body with `to`, `subject`, and `body` fields. It accepts only a single field named `raw` containing the entire email formatted as an RFC 2822 MIME message and then base64url-encoded. You need a Custom Function to build this string. In FlutterFlow, click Custom Code → + Add → Function. Name it 'buildGmailRaw'. Set Arguments: `toEmail` (String), `fromEmail` (String), `subject` (String), `body` (String). Set the Return Value to String. Paste the Dart code below. This function assembles the MIME headers and body into the correct RFC 2822 format and encodes it as base64url (NOT standard base64 — the URL-safe variant replaces `+` with `-` and `/` with `_`, and strips padding `=` characters). Getting the encoding wrong — for example, using standard base64 or leaving padding — returns a 400 error from the Gmail API with message 'Invalid value for ByteString field'. The `utf8.encode` call ensures non-ASCII characters in the subject or body are handled correctly. Custom Functions (as opposed to Custom Actions) CAN run in FlutterFlow's web preview because they are pure Dart with no native platform calls.

1// Custom Function: buildGmailRaw
2// Arguments: toEmail (String), fromEmail (String), subject (String), body (String)
3// Return type: String
4// No external dependencies needed - dart:convert is always available
5
6import 'dart:convert';
7
8String buildGmailRaw(
9  String toEmail,
10  String fromEmail,
11  String subject,
12  String body,
13) {
14  // Build RFC 2822 MIME message
15  final mimeMessage = [
16    'To: $toEmail',
17    'From: $fromEmail',
18    'Subject: $subject',
19    'Content-Type: text/plain; charset=utf-8',
20    'MIME-Version: 1.0',
21    '',  // blank line separates headers from body
22    body,
23  ].join('\r\n');
24
25  // Base64url encode (URL-safe, no padding)
26  final encoded = base64Url.encode(utf8.encode(mimeMessage));
27  // Strip padding '=' characters
28  return encoded.replaceAll('=', '');
29}

Click API Calls in the left navigation panel. Click + Add and choose Create API Group. Name it 'GmailAPI'. Set the Base URL to `https://gmail.googleapis.com/gmail/v1`. Click the Headers tab and add a shared header: key `Authorization`, value `Bearer [accessToken]`. In the Variables tab, add `accessToken` (String). Now add an API Call inside this group: click + Add API Call, name it 'SendMessage'. Set the method to POST. Set the API URL to `/users/me/messages/send`. In the Body tab, set body type to JSON. Add one field: key `raw`, value `[rawMessage]`. In the Variables tab, add `rawMessage` (String) — this will hold the output of the buildGmailRaw Custom Function. In the Response & Test tab, enter test values: a real access token from a signed-in session (copy it temporarily from a debug print), a base64url-encoded test message. Click Test API Call — a successful send returns a 200 with the sent message's ID. Add a second API Call: 'ListMessages', method GET, URL `/users/me/messages?maxResults=10`, Variable `q` (String, default `is:unread`) — add it as a query param `q=[q]`. Add a third: 'GetMessage', method GET, URL `/users/me/messages/[messageId]`, Variable `messageId` (String).

1{
2  "raw": "[rawMessage]"
3}

Open the page with your email compose UI — at minimum a Subject TextField, a Body TextField (multiline), a recipient address TextField, and a Send button. Wire the Send button's Actions panel in this order: (1) Call the signInWithGmailScope Custom Action and store the result in `gmailAccessToken` Page State. If the returned value is empty, show a Snackbar 'Could not sign in with Google — please try again' and stop. (2) Call the buildGmailRaw Custom Function, passing `toEmail` from the recipient field, `fromEmail` from the signed-in user's email App State variable, `subject` from the subject field, and `body` from the body field. Store the result in a `rawMessage` Page State variable. (3) Call the SendMessage API Call, binding `accessToken` to `gmailAccessToken` and `rawMessage` to the Custom Function output. (4) On success (check for a 200 response or non-empty `$.id` JSON Path), show a Snackbar 'Email sent!', clear the form fields, and optionally navigate back. On failure, show the error. Add a loading indicator (Page State boolean `isSending`) that shows a CircularProgressIndicator during the API call and disables the Send button. Test first in the web preview for the Custom Function step (buildGmailRaw), then on a real device for the full end-to-end flow including Google sign-in. If you'd rather skip the custom code setup, RapidDev's team builds FlutterFlow integrations like this every week — free scoping call at rapidevelopers.com/contact.