How To Save Data In A Google Sheet Using Flutter?

Lately, I have been working on small projects that have to deal with Google Spreadsheets (I hate spreadsheets). Things like reading data from Google Sheets using Laravel, writing and updating them.

Let’s begin with creating a new Flutter Project via the terminal.

To create a new flutter project, use the following command:

flutter create gsheets_via_flutter

Once done, go inside the project folder and open it in VSCode. To do this, use the following commands:

cd gsheets_via_flutter

code .

Okay, before we proceed any further, let me remind you that, in order to access any Google APIs, we will have to first create a Project on the Google Cloud Console. If you do not know how to do that, follow this guide about How To Create A project and Credentials on Google Cloud Console to use Google APIs.

Once you are done with it, you will have the following:

1. A new Project on the Google Cloud Console
2. A new Service Account for your project
3. A credentials (json) file, downloaded to your local computer
4. A New Google Sheet (which is shared with your service account email id)      **For this example, we'll name it 'GSHeet For Flutter'

If you do not have all of the above with you, please go through the Guide To Create a Google API user again and make sure you have not missed anything there.

HOW TO ACCESS GOOGLE SHEETS VIA FLUTTER?

No, let’s go back to your VSCode.

To connect Google Sheets using Flutter, we will use the gsheets package. To add it to our project, let’s open the ‘pubspec.yaml‘ file, and under the ‘dependencies’ section, add the following (take special care of correct spacing):

dependencies:
  flutter:
    sdk: flutter
  gsheets:

Now, let’s go to the lib\main.dart file and delete everything there. And, paste the following code into the file, save it and restart the project.

    import 'package:flutter/material.dart';
    import 'package:gsheets/gsheets.dart';


    const _apiCreds   = r'''
    {
      "type": "service_account",
      "project_id": "fluttergsheets-348717",
      "private_key_id": "2521u02c54f3fub00d00608567ae35e327a",
      "private_key": "-----BEGIN PRIVATE KEY-----\nMyKeyDetailsgohere==\n-----END PRIVATE KEY-----\n",
      "client_email": "fluttergsheets@fluttergsheets-452588.iam.gserviceaccount.com",
      "client_id": "108558811245241044281",
      "auth_uri": "https://accounts.google.com/o/oauth2/auth",
      "token_uri": "https://oauth2.googleapis.com/token",
      "auth_provider_x509_cert_url": "https://www.googleapis.com/oauth2/v1/certs",
      "client_x509_cert_url": "https://www.googleapis.com/robot/v1/metadata/x509/servieaccount%40fluttergsheets-348717.iam.gserviceaccount.com"
    }
    ''';

    const _sheetID          =   '1dLpu4ZzMKiMRH-7sHBpzM-qRkkoLS_B0GZj41lCDP5A';
    const _worksheetName    =   'Sheet1';



    void main() async {
      final gSheetObj       = GSheets(_apiCreds);
      final gSheetToUse     = await gSheetObj.spreadsheet(_sheetID);
      final worksheetToUse  = gSheetToUse.worksheetByTitle(_worksheetName);

      await worksheetToUse!.values.insertValue('Hello',column: 1, row: 1);
      await worksheetToUse.values.insertValue('Rajiv',column: 2, row: 1);


      runApp(const MyApp());
    }

    class MyApp extends StatelessWidget {
      const MyApp({ Key? key }) : super(key: key);

      @override
      Widget build(BuildContext context) {
        return Container(

        );
      }
    }

Please replace the values of _apiCreds, _sheetID, and _worksheetName name with what is applicable in your case. This would be based on what you would have got when you downloaded the creds (json) file and after creating the Google Sheets.

The code above is quite self-explanatory as most of the heavy-lifting is done by the gsheets package here.

Now, go and check your Google Sheet. You should see values being populated in the first two columns.

You can download this project from GitHub, here.