Scheduling and managing Google Meet events in Flutter

In this article, I will show how you can use Google Calendar API to schedule and manage Google Meet video conference events in Flutter. Using this API you can also add attendees for an event and even send email notifications to them.

For the sample app, I will be using Firebase for performing the CRUD operations to store the event details of those created from our app.

Create a new Firebase project

To get started, let’s create a new Firebase project for our app.

1. Go to the Firebase console, and click on Create a project.
2. Enter the Project name and click Continue.

3. Disable Google Analytics, as this is just a sample project. Click on Create project.

Wait a bit and your Firebase project will be ready to use.

Android setup

Follow the steps below to add Firebase to your Android app:

1. Click on the Android icon in the Firebase dashboard.
2. Fill the details of the form, and click on Register app.

3. Download the google-services.json file, and just drag & drop it in your project directory → android → app. Then, click Next.

4. Follow the instructions and add the code snippets to your project. Click Next.

5. As the final step Continue to Console.

iOS setup

Follow the steps below to add Firebase to your iOS app:

1. Click Add app and select iOS.

2. Fill in the details on the form and click on Register app.

3. Download the GoogleService-Info.plist file and place it in the appropriate folder.

NOTE: You will need to use Xcode for adding the file properly to your iOS project.

4. Skip steps 3 & 4, as they are already handled by the Flutter Firebase plugin.

5. As the final step Continue to Console.

For more detailed guide of adding Firebase to a Flutter project, check out the article here.

Set up the Calendar API

You have to enable the Google Calendar API from the Google Cloud Platform (GCP) console for getting access to it from the app.

1. Go to the GCP console.

Make sure the correct project is selected in the top bar. Otherwise, select the project that you just created from Firebase.

2. Click on the menu icon (top-left corner) and go to Marketplace.

3. Search for Google Calendar API and click on it.

4. Enable the API.

You will need the Client ID (auto-generated by Firebase) for both your Android and iOS app for authenticating using OAuth, which is required for using the Calendar API.

Navigate to APIs and Services → Credentials. Here, you will get the Client IDs for both platforms. You will need these later while setting up OAuth in the app.

Enable Cloud Firestore

We will be using Cloud Firestore for storing the event data. Follow the steps below to enable it:

1. Select Cloud Firestore from the Firebase dashboard menu, then click on Create database.

2. Select Start in test mode for the Security Rules. Click Next.

Here, we are using test mode, as this app is only for demonstration purposes, and we will not set up any authentication. But for any production app, it is a must to define a proper security rule.

3. Select a location for Firestore and click Enable.

Before starting to use the Firestore database, you need to do one more thing. Go to Project settings and specify the Support email.

If you do not set the Support email, you will get an OAuth error while interacting with the database or the Calendar API.

Now, let’s start creating the Flutter app.

Create a new Flutter project

You can use the following command to create a new Flutter project:

flutter create events_demo

Open the project using your IDE. You can use the following command to open using VS Code:

code events_demo

We will be using the following packages:

• firebase_core: For initializing the Firebase app.
• cloud_firestore: For using the Firebase Cloud Firestore.
• intl: For date formatting.
• googleapis: For using the Google Calendar API.
• googleapis_auth: For obtaining OAuth 2.0 access credentials.
• url_launcher: For launching the URL in the browser to ask the user for Google Calendar permission.

Import these packages:

Integrate Calendar API

As I said before, for accessing the Google Calendar API you will need the OAuth verification.

First of all, add the two Client IDs for both the platforms in a file called secrets.dart inside your lib folder. Create a method to retrieve the proper Client ID according to the Platform.

Create a file called calendar_client.dart. Here, we will define all the operations (namely, insert, modify & delete) to be performed using the Google Calendar API.

We will fill these methods in the next step.

Now inside the main() method of the main.dart file, you can initialize the Firebase app and the get the OAuth permission for accessing the Google Calendar of an account.

Event configuration

An Event object is used for defining a calendar event. You can set various properties to it.

Adding some event information:

Adding start and end time of the event:

Adding video conferencing support (this generates a Google Meet link):

Defining calendar operations

You can perform various calendar operations using the Google Calendar API. We will be defining the most commonly used ones:

• insert(): For creating a new calendar event.
• patch(): For modifying some of the fields of the calendar event.
• delete(): For deleting a calendar event.

Creating a new event

You can create a new event using the Calendar API, by using the insert method as follows:

The insert method takes the Event object and a calendar ID to create a new event in Google Calendar. Here, we are using the calendar ID as " primary" to use the primary calendar (in case the account contains multiple calendars) of the logged-in user.

If you want to add video conferencing support, set conferenceDataVersion to " 1". Setting it to " 0" assumes no conference data support and ignores conference data in the event's body.

You can notify the attendees of the event by setting the property sendUpdates to " all".

A “ confirmed” status means that event has been successfully added to the Google Calendar of the selected account.

To store the Google Meet link anywhere explicitly, you can retrieve it like this:

The complete insert method will be as follows:

Modifying an event

You can modify the fields of the event by using the patch method:

In addition to the modified Event object and the calendar ID, you have to provide one more property to it, i.e. the id of the event that you want to modify.

Most of the remaining properties are similar to the insert method. The complete modify method is given below:

Deleting an event

You can simply delete an event by using the delete method of the Calendar API. You have to just pass the calendar ID and the id of the event that you want to delete. The method is as follows:

Create a model class

You can create a model class for handling the event data. We will create a class called EventInfo containing two methods fromMap() for retrieving data from the database in a structured format, and toJson() for converting the event data to a JSON format which can be easily uploaded to the database.

CRUD operations on Cloud Firestore

Let’s start defining the CRUD operations on the Cloud Firestore database for storing and managing the event information.

First of all, create a new file called storage.dart. Inside it, define a collection and the main document in which all the event data will be stored. Create a class Storage and define the CRUD operations inside it.

Create event

This method takes an EventInfo object and stores the event data to the database.

Retrieve events

You can use this method for retrieving all the events from the database, sorted according to the start field, in ascending order.

Update event

This method takes an EventInfo object and updates the event data in the database.

Delete event

You can use this method for deleting an event from the database by passing the event ID.

App in action

We have successfully created our app for scheduling and managing Google Calendar events. Added video conferencing support to it and notify the attendees using email invite. Finally, we have connected the app to Firebase for keeping track of the events that are generated from our app.

A small demo of the completed app:

Conclusion

Here, I have only focused on the functionalities, but if you want to take a look at the UI code, head over to the GitHub repository of this project present below.

There are several other properties that you can use while generating a new calendar event like you can create a recurrence event, set reminder at a specific time, and many more.

Originally published on Codemagic Blog.

GitHub repo of the sample app is available in the following link:

sbis04/events_demo

Learn more

• Calendar API Docs
• Google sign-in & Firebase authentication using Flutter

Check out my other articles

Flutter: Creating an IoT based app to interact with any home electrical equipment

Flutter: Creating a route calculator using Google Maps

Flutter: Implementing Google Sign In

If you want to support me and want me to continue writing Flutter articles and building some interesting Flutter projects, please contribute to my Patreon page below:

Souvik Biswas is creating Flutter Apps | Patreon

You can follow me on Twitter and find some of my projects on GitHub. Also, don’t forget to checkout my Website. Thank you for reading, if you enjoyed the article make sure to show me some love by hitting that clap (👏) button!

Happy coding…

Souvik Biswas

https://www.twitter.com/FlutterComm