Google Meet

Go to console.cloud.google.com and select your Firebase project. Click APIs & Services in the left nav, then Library, and search for 'Google Calendar API'. Click it and press Enable. Next, click OAuth consent screen and make sure `https://www.googleapis.com/auth/calendar.events` is listed in your authorized scopes — if it's not, click Add or Remove Scopes, find `calendar.events` in the list (it shows as 'See, edit, share, and permanently delete all the calendars you can access using Google Calendar'), and add it. If your app is in testing mode, add the Google accounts you'll test with to the Test Users list — unapproved apps in testing mode can only be used by listed test users. For a production app (publishing to the App Store / Play Store), you'll need to complete Google's OAuth verification process for the calendar scope, which takes 1-4 weeks. Note the OAuth 2.0 Client ID you'll use — choose the Web Application type for testing in FlutterFlow's web preview; you'll need an iOS/Android client ID for published mobile apps.

FlutterFlow's built-in Google Sign-In via Firebase Auth does not allow you to specify custom OAuth scopes. To request `calendar.events`, you need a Custom Action that calls `google_sign_in` directly with the scope list. In FlutterFlow, click Custom Code in the left navigation panel, then click + Add and choose Action. Name it 'signInWithGoogleCalendar'. In the Dependencies field, add `google_sign_in: ^6.2.1` (check pub.dev for the latest version). Set the Return Value type to String — the action will return the OAuth access token. Paste the Dart code below. This action signs the user in with Google requesting both the profile scope and `calendar.events`, then returns the access token. Store the returned token in an App State variable named `googleAccessToken` (String, persisted to page state). The token is a short-lived credential (usually 1 hour); for production apps you'd handle refresh — but for a tutorial prototype, signing in again is sufficient. Custom Actions cannot run in FlutterFlow's web Run/Test mode — test this on a real device using FlutterFlow's 'Test on Device' option under the Run button.

1// Custom Action: signInWithGoogleCalendar
2// Add dependency: google_sign_in: ^6.2.1
3// Return type: String (the access token)
4
5import 'package:google_sign_in/google_sign_in.dart';
6
7Future<String> signInWithGoogleCalendar() async {
8  final GoogleSignIn googleSignIn = GoogleSignIn(
9    scopes: [
10      'email',
11      'profile',
12      'https://www.googleapis.com/auth/calendar.events',
13    ],
14  );
15
16  try {
17    // Sign out first to force account picker (useful during development)
18    await googleSignIn.signOut();
19    final GoogleSignInAccount? account = await googleSignIn.signIn();
20    if (account == null) return '';
21
22    final GoogleSignInAuthentication auth = await account.authentication;
23    return auth.accessToken ?? '';
24  } catch (e) {
25    return '';
26  }
27}

Click API Calls in the left navigation panel. Click + Add and choose Create API Group. Name it 'GoogleCalendar'. Set the Base URL to `https://www.googleapis.com/calendar/v3`. Click the Headers tab and add a shared header: key `Authorization`, value `Bearer [accessToken]`. In the Variables tab, add a variable named `accessToken` of type String — this is the token returned by the Custom Action in Step 2. Now add the first API Call inside this group: click + Add API Call, name it 'CreateMeetEvent'. Set the method to POST. In the API URL field, enter `/calendars/primary/events?conferenceDataVersion=1`. In the Body tab, set body type to JSON and paste the body template shown in the code block below. The `summary`, `start`, `end`, and `attendees` fields should be Variables so you can bind them dynamically from the UI. Add variables: `eventSummary` (String), `startDateTime` (String, ISO 8601 format like '2024-12-01T14:00:00Z'), `endDateTime` (String), `attendeeEmail` (String). In the JSON body, reference them with [variableName] syntax. The `createRequest` in `conferenceData` triggers Meet link generation — omitting it means no Meet link even if conferenceDataVersion=1 is set. Add a second API Call: 'ListMeetEvents', method GET, URL `/calendars/primary/events?singleEvents=true&orderBy=startTime&q=has:hangoutsMeet`.

1{
2  "summary": "[eventSummary]",
3  "start": {
4    "dateTime": "[startDateTime]",
5    "timeZone": "UTC"
6  },
7  "end": {
8    "dateTime": "[endDateTime]",
9    "timeZone": "UTC"
10  },
11  "attendees": [
12    { "email": "[attendeeEmail]" }
13  ],
14  "conferenceData": {
15    "createRequest": {
16      "requestId": "[eventSummary]-request",
17      "conferenceSolutionKey": {
18        "type": "hangoutsMeet"
19      }
20    }
21  }
22}

On the page where users create a meeting, wire the Create Meeting button's Actions. The full action chain is: (1) Call the signInWithGoogleCalendar Custom Action and store the result in the `googleAccessToken` App State variable; (2) If the token is empty, show an error Snackbar and stop; (3) Call the CreateMeetEvent API Call with the accessToken, eventSummary, startDateTime, endDateTime, and attendeeEmail bound to their respective form fields; (4) In the API Call's Response & Test tab, add a JSON Path to extract the Meet URL: `$.conferenceData.entryPoints[0].uri` — this is the video join link; also extract `$.htmlLink` to get the Calendar event link; (5) Store the Meet URL in a Page State String variable `meetJoinUrl`; (6) Show a Container or Card that becomes visible when `meetJoinUrl` is non-empty, displaying the URL and a Launch URL action on a 'Join Meeting' button. For the form fields, a DateTimePicker widget provides the start time — convert its output to ISO 8601 format using a Custom Function: `String toIso8601(DateTime dt) { return dt.toUtc().toIso8601String(); }`. To handle the end time, compute it as start + 60 minutes in the same Custom Function or with a second function.

1// Custom Function: toIso8601
2// Argument: dt (DateTime)
3// Return type: String
4String toIso8601(DateTime dt) {
5  return dt.toUtc().toIso8601String();
6}
7
8// Custom Function: addMinutes
9// Arguments: dt (DateTime), minutes (int)
10// Return type: DateTime
11DateTime addMinutes(DateTime dt, int minutes) {
12  return dt.add(Duration(minutes: minutes));
13}

To show the user's upcoming Meet meetings in a ListView, add a Backend Query to the meetings page (or a ListView widget) that calls the ListMeetEvents API Call. In the Query settings, bind the `accessToken` variable to the `googleAccessToken` App State variable. The Calendar API returns a `items` array of Calendar events. Each item has `summary` (meeting title), `start.dateTime`, `end.dateTime`, and `conferenceData.entryPoints` (which contains the Meet URL). In the Response & Test tab of the ListMeetEvents call, add JSON Paths: `$.items` to get the array, then navigate into each item. In the ListView, bind each list tile to the response items array. Add JSON Paths for the child fields you need: `$.items[*].summary`, `$.items[*].start.dateTime`, and `$.items[*].conferenceData.entryPoints[0].uri`. Filtering to only Meet events: the `q=has:hangoutsMeet` query parameter helps but isn't perfect. Add a conditional in the ListView to only show items where the Meet URL JSON Path returns a non-empty value. The `singleEvents=true` parameter is mandatory when using `orderBy=startTime` — omitting it returns a 400 error from the API. Set the timeMin parameter to the current date-time to only fetch future events: add a Variable `timeMin` to the API Call and bind it to a Custom Function that returns the current UTC ISO 8601 timestamp.