dart - insert google calendar into flutter mobile app

3
votes

Preface: I am relatively new to mobile app development.

My team and I are developing a Mobile app where one of the pieces of intended functionality is a shared calendar between multiple users. We are writing the application using Flutter, which implements the dart language.

The dart version of the Google API is in beta, as is Flutter, which means that documentation is relatively scarce, compared to more established methods of mobile development.

My question is as follows: How do I display the User's Google Calendar on the App page:

This breaks down into two parts,

1)How to I retrieve the information from Google?

I know this will require the Google Calendar API, which I have added the dependency for. I am unsure what command will return the needed information.

https://pub.dartlang.org/packages/googleapis

https://developers.google.com/calendar/v3/reference/

Unfortunately Google has not released any examples on how to implement this in dart

2)How do I physically display the information on the Calendar page?

2
dartgoogle-calendar-apiflutter
Sounds like you'd need to build a component that connects to the Google Calendar API to get the user calendar information and create a Flutter Widget to display the information yourself – Xavi Rigau
"The dart version of the Google API is in beta" where do you get that from? The googleapis package is just auto-generated code from API metadata and therefore quite similar to other languages or the API docs itself. – Günter Zöchbauer
@GunterZochbauer developers.google.com/api-client-library This wass astep or two farther back from the previous links – James Cory
I see. I think the page needs an update. – Günter Zöchbauer

2 Answers

0
votes

The latest version of https://pub.dev/packages/googleapis has these APIs!

0
votes
  1. How to I retrieve the information from Google?

I know this will require the Google Calendar API, which I have added the dependency for. I am unsure what command will return the needed information.

There's googleapis plugin that you can use for Google Calendar API. For example, if you'd like to access the events from the Calendar, you can use Events().items which returns a List<Event>.

I suggest going through the documentation for more details and see how it can fit your use case.

  1. How do I physically display the information on the Calendar page?

Once you got the Calendar details that you'd like to display, you can either create your own Calendar widget or use existing plugins that can display a Calendar on your app i.e. table_calendar. Using the table_calendar plugin, events can be displayed with the CalendarBuilder class. CalendarBuilder.markersBuilder property for example can display markers on each day cell. Using it looks like this:

Widget _buildTableCalendarWithBuilders() {
  return TableCalendar(
    ...
    builders: CalendarBuilders(
      ...
      markersBuilder: (context, date, events, holidays) {
        final children = <Widget>[];

        // a filter for the events listed from Google Calendar API can be set here

        if (events.isNotEmpty) {
          children.add(
            Positioned(
              right: 1,
              bottom: 1,
              child: _buildEventsMarker(date, events),
            ),
          );
        }

        if (holidays.isNotEmpty) {
          children.add(
            Positioned(
              right: -2,
              top: -2,
              child: _buildHolidaysMarker(),
            ),
          );
        }

        return children;
      },
    ),
  ),
}

A complete working sample using table_calendar plugin can be checked here.