Posting data to google sheet using a Flutter App (Part-1)

In this article we will store data in a google sheet using google appscript and flutter application.

• Introduction :

Do you know that anyone can make their CRUD APIs with mere knowledge of backend?
Have you ever thought that google sheets can serve as a database and can be integrated in mobile applications?
If yes then this article is for you!!
Let’s get ready to unfold the above scenarios and break the suspense.

• Table of content

– Structuring our google sheet
– Creating API using Google Appscript
– Creating a simple flutter app
– Result

• Structuring our google sheet :

• Sign in with your Google Account.
• Go to your Google Drive and create a new ‘Google Sheets’ .
• Setup headings (schema) of sheet. Like this ⬇️

demo sheet structure

• Creating API using Google Appscript :

1. In the header section of the app you have to click on tools

2. Open Script editor and rename the project.

3. Put the following code in code.gs file to post data to make an API to store data to google DEMO sheet.
Here, we’ll retrieve parameters using request.parameter . Finally, by using a method appendRow([]) , we’ll insert form data into Google Sheet. And then we’ll return a JSON response with status: SUCCESS/FAILED .

4. In line no. 3, you have to put your sheet ID of your sheet as depicted below.

Highlighted part is known as sheet ID

5. Finally we will deploy our demo application and generate the api url.
Allow permissions issue occur then just allow permission for accessing your google account.

Click on new deployment

Click on web app

Change access to anyone and fill th details and deploy

Copy the url ID

🚀 Hurray! Our deployment is done with all the endpoint to post data to google sheet.

• Creating a simple flutter app :

• Create a new flutter project .
• In pubspec.yaml, add the following dependency.

dependencies:
  flutter:
    sdk: flutter
  http: ^0.12.0+3

• Make the folder structure like this ⬇️ for the project.

folder structure

• First make a model to convert our input to json data.

• Then write code to handle data and to post it to google sheet.
  Here we will use that url and will make apost function using http package we added to yaml file.

• Now make a simple form to input the data.

Result :

Now it’s time to see the final result.

demo

Data in google sheet

Kudos fellas !! finally we did it 🎉🎉

I have added a github repository for your reference.

AmanKansal2012/GoogleSheetToFlutter

Till then wait for the part 2 of this article to know how can we fetch the data from google sheet to app.

If you have liked the article then do clap it and motivate me to write such more articles.
Happy fluttering…
-Aman Kansal