How to Read Google Sheet Data in a Flutter App
![Sumit Soni](/_next/image?url=https%3A%2F%2Fstatic-cdn.geekyants.com%2Fuser%2F927%2F2022-09-07%2F166253893913783.png&w=3840&q=75)
![lines](/_next/image?url=%2Fimages%2Fservices%2Fnew%2Flines-bg.png&w=3840&q=75)
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:
- A Google account.
- Flutter is installed on your machine.
Step 1: Set Up Google Cloud Project
- 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](/_next/image?url=https%3A%2F%2Fstatic-cdn.geekyants.com%2Farticleblogcomponent%2F29528%2F2024-07-17%2F300444392-1721204973.png&w=3840&q=75)
![Screenshot 2024-06-26 at 6.27.02 PM.png](/_next/image?url=https%3A%2F%2Fstatic-cdn.geekyants.com%2Farticleblogcomponent%2F29529%2F2024-07-17%2F574090974-1721205072.png&w=3840&q=75)
![Screenshot 2024-06-26 at 6.35.20 PM.png](/_next/image?url=https%3A%2F%2Fstatic-cdn.geekyants.com%2Farticleblogcomponent%2F29531%2F2024-07-17%2F277525886-1721205175.png&w=3840&q=75)
![Screenshot 2024-06-26 at 6.36.05 PM.png](/_next/image?url=https%3A%2F%2Fstatic-cdn.geekyants.com%2Farticleblogcomponent%2F29532%2F2024-07-17%2F265486913-1721205268.png&w=3840&q=75)
Step 2: Create Service Account
- 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](/_next/image?url=https%3A%2F%2Fstatic-cdn.geekyants.com%2Farticleblogcomponent%2F29534%2F2024-07-17%2F411888076-1721205311.png&w=3840&q=75)
![Screenshot 2024-06-26 at 6.38.59 PM.png](/_next/image?url=https%3A%2F%2Fstatic-cdn.geekyants.com%2Farticleblogcomponent%2F29535%2F2024-07-17%2F701852671-1721205323.png&w=3840&q=75)
- Grant Permissions
- To grant permission, assign "Editor" to your service account and click "Continue."
- 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](/_next/image?url=https%3A%2F%2Fstatic-cdn.geekyants.com%2Farticleblogcomponent%2F29537%2F2024-07-17%2F553281598-1721205380.png&w=3840&q=75)
Step 3: Share Google Sheet with Service Account
- Open your Google Sheet.
- Click "Share" and enter the email address of your service account (found in the JSON key file).
- 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](/_next/image?url=https%3A%2F%2Fstatic-cdn.geekyants.com%2Farticleblogcomponent%2F29539%2F2024-07-17%2F260125840-1721209700.png&w=3840&q=75)
![Screenshot 2024-06-26 at 6.46.35 PM.png](/_next/image?url=https%3A%2F%2Fstatic-cdn.geekyants.com%2Farticleblogcomponent%2F29540%2F2024-07-17%2F447578741-1721209734.png&w=3840&q=75)
![Screenshot 2024-06-26 at 6.48.50 PM.png](/_next/image?url=https%3A%2F%2Fstatic-cdn.geekyants.com%2Farticleblogcomponent%2F29541%2F2024-07-17%2F612894960-1721209744.png&w=3840&q=75)
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
, andprivateKey
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.