Jul 17, 2024

How to Read Google Sheet Data in a Flutter App

Meta description: Learn to integrate Google Sheets data in your Flutter app using the googleapis package, enabling dynamic content management and enhanced user interaction.
Sumit Soni
Sumit SoniSoftware Engineer- II
lines

Reading data from Google Sheets in a Flutter app can be incredibly useful for many applications, such as displaying data, managing configurations, or handling dynamic content. In this article, we'll walk you through setting up a Google Cloud Console project, creating a service account, and using the googleapis package to read data from Google Sheets in your Flutter app.

Additionally, we'll cover how to handle nested Google Sheets by extracting the GID from the Google Sheets URL.

Prerequisites

Before we start, ensure you have the following:

  1. A Google account.
  2. Flutter is installed on your machine.

Step 1: Set Up Google Cloud Project

  1. Create a Google Cloud Project
    • Go to the Google Cloud Console.
    • Click on the project drop-down and select "New Project."
    • Enter a project name and click "Create."

Screenshot 2024-06-26 at 6.25.59 PM.png
Screenshot 2024-06-26 at 6.27.02 PM.png

Screenshot 2024-06-26 at 6.35.20 PM.png
Screenshot 2024-06-26 at 6.36.05 PM.png

Step 2: Create Service Account

  1. Create Service Account
    • Go to the Service Accounts page.
    • Click "Create Service Account."
    • Enter a name and ID for your service account, then click "Create."

Screenshot 2024-06-26 at 6.37.09 PM.png
Screenshot 2024-06-26 at 6.38.59 PM.png

  1. Grant Permissions

    • To grant permission, assign "Editor" to your service account and click "Continue."
  2. Create Key

    • Click "Create Key" and select "JSON" as the key type.
    • A JSON file will be downloaded. Save this file securely as it contains your service account credentials.

Screenshot 2024-06-26 at 6.42.35 PM.png

Step 3: Share Google Sheet with Service Account

  1. Open your Google Sheet.
  2. Click "Share" and enter the email address of your service account (found in the JSON key file).
  3. Grant "Viewer" or "Editor" access as needed.

Below i am differentiating google sheets which is nested on the behalf of GID number, which is available at the end of google sheet url

Screenshot 2024-06-26 at 6.44.33 PM.png
Screenshot 2024-06-26 at 6.46.35 PM.png
Screenshot 2024-06-26 at 6.48.50 PM.png

Step 4: Integrate Google Sheets API in Flutter

1. Add Dependencies Add the following dependencies in your pubspec.yaml file:

2. Create Dart File for Google Sheets API Service

Create a Dart file (e.g., google_sheets_api.dart) and add the following code:

Step5: Calling the Method to Fetch Data

To fetch data from Google Sheets, you can use a method call that initializes the GoogleSheetsApiData with the necessary parameters and then calls accessGoogleSheetData to retrieve the data. Here’s how you can do it:

In this code:

  • clientEmail, clientId, and privateKey are obtained from the service account JSON file.
  • google_sheet_url is the URL of the Google Sheet you want to read.
  • GoogleSheetsApiData is a class that encapsulates the logic for accessing the Google Sheets API.

Conclusion

You have now set up your Flutter app to read data from Google Sheets using the googleapis package, including handling nested Google Sheets by extracting the GID from the Google Sheets URL. This setup allows your app to dynamically fetch and display data from Google Sheets, providing flexibility and easy management of content. For more advanced use cases, explore the extensive capabilities of the Google Sheets API.

Book a Discovery Call.

blog logo