This article discusses how Google Calendar API is used to manage the entire Google Meet events in Flutter. Since this is a step-by-step guide, you will learn how to create a firebase project, android setup, and calendar API setup as well. Using this API, it will be easy for you to add attendees to an event and share the notification in the mail about the same. In addition, we’ll be using Firebase to perform the CRUD operations that will store all event details created through the app. In short, there is a lot that everyone can learn through this article, be it the developer, managers, Company Owners, or entrepreneurs. 

Create a New Firebase Project, First 

The process starts with creating a new Firebase project for the app first. For that, follow the steps below:

1. First, go to the Firebase console and then push the ‘create a project’ option. 
2. Next, visit the ‘Project Name’ and press continue. 
3. Now, disable Google Analytics since it is just the sample project and click on create a project. 
4. Finally, the Firebase project is ready to use. 

Now, Let’s Do the Android Setup

Here are the steps to add Firebase to your Android application:

1. First, go to the Firebase dashboard and click on the Android icon. 
2. Now, fill in the form before clicking on the register app. 
3. Download the file google-services.json. You will just need to drag and drop the file in your project directory- android-app before hitting the ‘Next.’
4. Now, just follow the instructions given there and add the code snippets to the project. Then, click Next. 
5. Continue to Console.

The iOS Setup 

Here are some steps that you need to follow to add Firebase to your iOS app. 

1. Click on the Add app option and select iOS. 
2. Fill in all details on the form and click on Register App. 
3. Download the file GoogleService-info.plist and push it in the apt folder. 
4. Continue to console 

Next, Setup the Calendar API 

For this, go to Google Cloud Platform Console and enable the Google Calendar API to access it from the app. Also, ensure that you have selected the right project in the top bar.

1. Go to the GCP console
2. Now, click on the menu icon and click on the Marketplace
3. Search and click on Google Calendar API
4.  Enable the API

The firebase must have generated a Client ID, which you will require at this point for both iOS and Android app authentication. It is done by using OAuth, which indeed is a must-have for using the Calendar API. 

For getting the Client IDs for each platform, you will have to navigate APIs and Services- Credentials. 

Enable Cloud Firestore 

Here, we will be using Cloud Firestore to store the event data, and here are a few steps to enable it:

1. Go to the Firebase dashboard menu and select Cloud Firestore. Now, click on create a database. 
2. Select Start in test mode and then click Next. 
3. Choose the location for Firestore and enable it. 
4. Now, before starting to use the Firestore database, go to Project settings and specify the Support email, in the absence of which you will receive an OAutherror when interacting with Calendar API and database. 
5. Once that’s done, we will create the Flutter app. 

Flutter App Creation 

Use the command given below to create the new Flutter app:

flutter create events_demo

Now, open the project using your IDE, for which you can use the command given here:

code events_demo

Here are the packages that you will need:

1. Cloud_firestore – that uses the Firebase Cloud Firestore
2. Firebase_core – that initializes the Firebase app
3. Intl – for formatting the date 
4. Googleapis – To use the Google Calendar API
5. Url_launcher – To launch the URL in the browser 
6. Googleapis_auth – To obtain OAuth 2.0 access credentials 

You will need to import these packages:

dependencies:

  firebase_core: ^0.5.0

  cloud_firestore: ^0.14.0+2

  intl: ^0.16.1

  googleapis: ^0.55.0

  googleapis_auth: ^0.2.12

  url_launcher: ^5.5.0

Integrate Calendar API 

Add two Client IDs for each platform in a file named secrets.dart inside the lib folder. Create a method that retrieves the proper Client ID based on the platform. 

import ‘dart:io’ show Platform;

class Secret {

  static const ANDROID_CLIENT_ID = “”;

  static const IOS_CLIENT_ID = “”;

  static String getId() => Platform.isAndroid ? Secret.ANDROID_CLIENT_ID : Secret.IOS_CLIENT_ID;

}

Now, you will create the file named calendar_client.dart that helps define every operation, including namely, modify, insert, and delete. These operations are performed using the Google Calendar API. 

class CalendarClient {

  // For storing the CalendarApi object, this can be used 

  // for performing all the operations

  static var calendar;

  // For creating a new calendar event

  Future

    @required String title,

    @required String description,

    @required String location,

    @required List attendeeEmailList,

    @required bool shouldNotifyAttendees,

    @required bool hasConferenceSupport,

    @required DateTime startTime,

    @required DateTime endTime,

  }) async {}

  // For patching an already created calendar event

  Future

    @required String id,

    @required String title,

    @required String description,

    @required String location,

    @required List attendeeEmailList,

    @required bool shouldNotifyAttendees,

    @required bool hasConferenceSupport,

    @required DateTime startTime,

    @required DateTime endTime,

  }) async {}

  // For deleting a calendar event

  Future delete(String eventId, bool shouldNotify) async {}

Inside the main() method of the main.dart file, initialize the Firebase app, and get the OAuth permission to access the Google Calendar of the account. 

import ‘package:url_launcher/url_launcher.dart’;

import ‘package:firebase_core/firebase_core.dart’;

import ‘package:googleapis_auth/auth_io.dart’;

import ‘package:googleapis/calendar/v3.dart’ as cal;

Future main() async {

  WidgetsFlutterBinding.ensureInitialized();

  await Firebase.initializeApp();

  var _clientID = new ClientId(Secret.getId(), “”);

  const _scopes = const [cal.CalendarApi.CalendarScope];

  await clientViaUserConsent(_clientID, _scopes, prompt).then((AuthClient client) async {

    CalendarClient.calendar = cal.CalendarApi(client);

  });

  runApp(MyApp());

}

void prompt(String url) async {

  if (await canLaunch(url)) {

    await launch(url);

  } else {

    throw ‘Could not launch $url’;

  }

}

Event Configuration 

An Event object defines a calendar event, and you can even set different properties to it. 

Event event = Event();

event.summary = title;

event.description = description;

event.attendees = attendeeEmailList;

event.location = location;

Now add the start and end time of the event:

EventDateTime start = new EventDateTime();

start.dateTime = startTime;

start.timeZone = “GMT+05:30”;

event.start = start;

EventDateTime end = new EventDateTime();

end.timeZone = “GMT+05:30”;

end.dateTime = endTime;

event.end = end;

You will need to add video conferencing support, which generates a Google Meet link for you and attendees. 

ConferenceData conferenceData = ConferenceData();

CreateConferenceRequest conferenceRequest = CreateConferenceRequest();

// Unique ID should be used for every separate video conference events

conferenceRequest.requestId = “${startTime.millisecondsSinceEpoch}-${endTime.millisecondsSinceEpoch}”;

conferenceData.createRequest = conferenceRequest;

event.conferenceData = conferenceData;

Define Calendar Operations

Now, it is time to define the calendar operations. You can perform different calendar operations using Google Calendar API, which is defined as follows: 

insert() – helps create a new calendar event

patch() – helps modify some calendar events fields 

delete() – delete the event 

Create a New Event 

Now, we will create a new event using Calendar API using the insert method:

String calendarId = “primary”;

try {

  await calendar.events

      .insert(event, calendarId,

          conferenceDataVersion: hasConferenceSupport ? 1 : 0, sendUpdates: shouldNotifyAttendees ? “all” : “none”)

      .then((value) {

    print(“Event Status: ${value.status}”);

    if (value.status == “confirmed”) {

      print(‘Event added to Google Calendar’);

    } else {

      print(“Unable to add event to Google Calendar”);

    }

  });

} catch (e) {

  print(‘Error creating event $e’);

}

So, to create the new event in the Google Calendar, insert a method that takes the Event object, and a Calendar ID are essential. Use Calendar ID as primary to use the primary calendar of the users who have logged in. For adding the video conferencing support, it is essential to set conferenceDataVersion to 1. If it is set to 0, that would assume no conference data support, hence ignore it in the body of the event. 

It is also possible to notify the meeting attendees if you set the property sendUpdates to all.  If you see ‘Confirmed’ means the event is added to the Google Calendar of chosen account. Now, to store the Google Meet link anywhere, use this to retrieve it:

if (value.status == “confirmed”) {

  String joiningLink;

  joiningLink = “https://meet.google.com/${value.conferenceData.conferenceId}”;

  print(‘Event added to Google Calendar’);

}

Here is the complete insert method:

Future

  @required String title,

  @required String description,

  @required String location,

  @required List attendeeEmailList,

  @required bool shouldNotifyAttendees,

  @required bool hasConferenceSupport,

  @required DateTime startTime,

  @required DateTime endTime,

}) async {

  Map eventData;

  // If the account has multiple calendars, then select the “primary” one

  String calendarId = “primary”;

  Event event = Event();

  event.summary = title;

  event.description = description;

  event.attendees = attendeeEmailList;

  event.location = location;

  if (hasConferenceSupport) {

    ConferenceData conferenceData = ConferenceData();

    CreateConferenceRequest conferenceRequest = CreateConferenceRequest();

    conferenceRequest.requestId = “${startTime.millisecondsSinceEpoch}-${endTime.millisecondsSinceEpoch}”;

    conferenceData.createRequest = conferenceRequest;

    event.conferenceData = conferenceData;

  }

  EventDateTime start = new EventDateTime();

  start.dateTime = startTime;

  start.timeZone = “GMT+05:30”;

  event.start = start;

  EventDateTime end = new EventDateTime();

  end.timeZone = “GMT+05:30”;

  end.dateTime = endTime;

  event.end = end;

 try {

   await calendar.events

       .insert(event, calendarId,

           conferenceDataVersion: hasConferenceSupport ? 1 : 0, sendUpdates: shouldNotifyAttendees ? “all” : “none”)

       .then((value) {

     print(“Event Status: ${value.status}”);

     if (value.status == “confirmed”) {

       String joiningLink;

       String eventId;

        eventId = value.id;

        if (hasConferenceSupport) {

          joiningLink = “https://meet.google.com/${value.conferenceData.conferenceId}”;

        }

        eventData = {‘id’: eventId, ‘link’: joiningLink};

        print(‘Event added to Google Calendar’);

      } else {

        print(“Unable to add event to Google Calendar”);

      }

    });

  } catch (e) {

    print(‘Error creating event $e’);

  }

  return eventData;

}

Here is the complete insert method: 

What if you want to modify an event? 

Use the patch method for that. 

String calendarId = “primary”;

try {

  await calendar.events

      .patch(event, calendarId, id,

          conferenceDataVersion: hasConferenceSupport ? 1 : 0, sendUpdates: shouldNotifyAttendees ? “all” : “none”)

      .then((value) {

    print(“Event Status: ${value.status}”);

      print(‘Event updated in google calendar’);

    } else {

      print(“Unable to update event in google calendar”);

    }

  });

} catch (e) {

  print(‘Error updating event $e’);

}

Provide one more property called the id apart from the event object and Calendar ID. Here is the complete modify method. 

Future

  @required String id,

  @required String title,

  @required String description,

  @required String location,

  @required List attendeeEmailList,

  @required bool shouldNotifyAttendees,

  @required bool hasConferenceSupport,

  @required DateTime startTime,

  @required DateTime endTime,

}) async {

  Map eventData;

  String calendarId = “primary”;

  Event event = Event();

  event.summary = title;

  event.description = description;

  event.attendees = attendeeEmailList;

  event.location = location;

  EventDateTime start = new EventDateTime();

  start.dateTime = startTime;

  start.timeZone = “GMT+05:30”;

  event.start = start;

  EventDateTime end = new EventDateTime();

  end.timeZone = “GMT+05:30”;

  end.dateTime = endTime;

  event.end = end;

  try {

    await calendar.events

        .patch(event, calendarId, id,

            conferenceDataVersion: hasConferenceSupport ? 1 : 0, sendUpdates: shouldNotifyAttendees ? “all” : “none”)

        .then((value) {

      print(“Event Status: ${value.status}”);

      if (value.status == “confirmed”) {

        String joiningLink;

        String eventId;

        eventId = value.id;

        if (hasConferenceSupport) {

          joiningLink = “https://meet.google.com/${value.conferenceData.conferenceId}”;

        }

        eventData = {‘id’: eventId, ‘link’: joiningLink};

        print(‘Event updated in google calendar’);

      } else {

        print(“Unable to update event in google calendar”);

      }

    });

  } catch (e) {

    print(‘Error updating event $e’);

  }

  return eventData;

}

What if you want to delete an event? 

Use the delete method of Calendar API for which you need to pass the calendar ID and the id of event that is meant to be deleted. It can be done this way:

Future delete(String eventId, bool shouldNotify) async {

  String calendarId = “primary”;

  try {

    await calendar.events.delete(calendarId, eventId, sendUpdates: shouldNotify ? “all” : “none”).then((value) {

      print(‘Event deleted from Google Calendar’);

    });

  } catch (e) {

    print(‘Error deleting event: $e’);

  }

}

Create a Model Class

Create a class named EventInfo incorporating two methods fromMap() to handle the data of the events and retrieve it from the database in a structured way. toJson() helps in converting the event data to a JSON format that can be uploaded to the database. 

import ‘package:flutter/material.dart’;

class EventInfo {

  final String id;

  final String name;

  final String description;

  final String location;

  final String link;

  final List attendeeEmails;

  final bool shouldNotifyAttendees;

  final bool hasConfereningSupport;

  final int startTimeInEpoch;

  final int endTimeInEpoch;

  EventInfo({

    @required this.id,

    @required this.name,

    @required this.description,

    @required this.location,

    @required this.link,

    @required this.attendeeEmails,

    @required this.shouldNotifyAttendees,

    @required this.hasConfereningSupport,

    @required this.startTimeInEpoch,

    @required this.endTimeInEpoch,

  });

  EventInfo.fromMap(Map snapshot)

      : id = snapshot[‘id’] ?? ”,

        name = snapshot[‘name’] ?? ”,

        description = snapshot[‘desc’],

        location = snapshot[‘loc’],

        link = snapshot[‘link’],

        attendeeEmails = snapshot[’emails’] ?? ”,

        shouldNotifyAttendees = snapshot[‘should_notify’],

        hasConfereningSupport = snapshot[‘has_conferencing’],

        startTimeInEpoch = snapshot[‘start’],

        endTimeInEpoch = snapshot[‘end’];

  toJson() {

    return {

      ‘id’: id,

      ‘name’: name,

      ‘desc’: description,

      ‘loc’: location,

      ‘link’: link,

      ’emails’: attendeeEmails,

      ‘should_notify’: shouldNotifyAttendees,

      ‘has_conferencing’: hasConfereningSupport,

      ‘start’: startTimeInEpoch,

      ‘end’: endTimeInEpoch,

    };

  }

}

What’s new in Flutter 2.2.0 to make it more adaptive?

CRUD Operations on Cloud Firestore

Now, define the CRUD operations in the Cloud Firestore database that stores and manages the information related to the event. 

Create a file named storage.dart and define a collection, and the entire data related to the event is stored. Now, create class storage and specify the CRUD operations inside it. 

import ‘package:cloud_firestore/cloud_firestore.dart’;

import ‘package:events_demo/models/event_info.dart’;

import ‘package:flutter/material.dart’;

final CollectionReference mainCollection = FirebaseFirestore.instance.collection(‘event’);

final DocumentReference documentReference = mainCollection.doc(‘test’);

class Storage {

  Future storeEventData(EventInfo eventInfo) async {}

  Future updateEventData(EventInfo eventInfo) async {}

  Future deleteEvent({@required String id}) async {}

  Stream retrieveEvents() {}

}

Create the event

EventInfo object is needed to store the event data in the database. 

Future storeEventData(EventInfo eventInfo) async {

  DocumentReference documentReferencer = documentReference.collection(‘events’).doc(eventInfo.id);

  Map data = eventInfo.toJson();

  print(‘DATA:\n$data’);

  await documentReferencer.set(data).whenComplete(() {

    print(“Event added to the database, id: {${eventInfo.id}}”);

  }).catchError((e) => print(e));

}

Retrieve the event

It is easy to do so and retrieve the event from the database, which is sorted as per the start field in ascending order. 

Stream retrieveEvents() {

  Stream myClasses = documentReference.collection(‘events’).orderBy(‘start’).snapshots();

  return myClasses;

}

Read Our Other Post on How to Create Video Streaming App with Flutter

Update the event

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

Future updateEventData(EventInfo eventInfo) async {

  DocumentReference documentReferencer = documentReference.collection(‘events’).doc(eventInfo.id);

  Map data = eventInfo.toJson();

  print(‘DATA:\n$data’);

  await documentReferencer.update(data).whenComplete(() {

    print(“Event updated in the database, id: {${eventInfo.id}}”);

  }).catchError((e) => print(e));

}

Delete the event

This helps you delete the event from the database by passing the event ID. 

Future deleteEvent({@required String id}) async {

  DocumentReference documentReferencer = documentReference.collection(‘events’).doc(id);

  await documentReferencer.delete().catchError((e) => print(e));

  print(‘Event deleted, id: $id’);

}

Application Ready!

Congrats! The app is ready to schedule and manage all Google Calendar events. You can add video conferencing support and notify the attendees regarding the same. Also, we even connected the app to Firebase to track all events generated from the app. You can always hire an expert developer if you want to do it perfectly, without any hassle. So, go ahead and try it yourself today! 

At your Team in India, we have a team of flutter experts. If you want to hire Developers or have any questions on what all services we offer at Your team in India– Click here to contact us.

The post How to Manage Google Meet Events in Flutter? appeared first on Your Team In India.