How to Use Google API In Flutter?

3 min read
How to Use Google API In Flutter
How to Use Google API In Flutter

Earlier we have been through how to open the google maps app if available with flutter. So in this article, we will go through how to use Google API in Flutter.

How to Use Google API In Flutter?

You can try with the available package google_sign_in 4.5.9

So logging in using package google_sign_in and then get auth headers from it:

import 'package:google_sign_in/google_sign_in.dart'
    show GoogleSignIn, GoogleSignInAccount;

import 'package:googleapis/people/v1.dart'
    show ListConnectionsResponse, PeopleApi;

useGoogleApi() async {
  final _googleSignIn = new GoogleSignIn(
    scopes: [
      'email',
      'https://www.googleapis.com/auth/contacts.readonly',
    ],
  );

  await _googleSignIn.signIn();

  final authHeaders = _googleSignIn.currentUser.authHeaders;

  // custom IOClient from below
  final httpClient = GoogleHttpClient(authHeaders); 

  data = await PeopleApi(httpClient).people.connections.list(
      'people/me',
      personFields: 'names,addresses',
      pageToken: nextPageToken,
      pageSize: 100,
  );
}

This is a custom IOClient implementation that automatically adds the auth headers to each request. So the Google APIs call support passing a custom HTTP client to be used instead of the default.

import 'package:http/io_client.dart';
import 'package:http/http.dart';

class GoogleHttpClient extends IOClient {
  Map<String, String> _headers;

  GoogleHttpClient(this._headers) : super();

  @override
  Future<StreamedResponse> send(BaseRequest request) =>
      super.send(request..headers.addAll(_headers));

  @override
  Future<Response> head(Object url, {Map<String, String> headers}) =>
      super.head(url, headers: headers..addAll(_headers));

}
Dependencies In pubspec.yaml:
dependencies:
  google_sign_in: any
  googleapis: any

How it works:

Necessary imports:

import 'package:googleapis/drive/v3.dart' as drive;
import 'package:google_sign_in/google_sign_in.dart' as signIn;
  • Step 1, sign in the user and ask for access permission (scope) to google drive:
    final googleSignIn = signIn.GoogleSignIn.standard(scopes: [drive.DriveApi.DriveScope]);
    final sign.GoogleSignInAccount account = await googleSignIn.signIn();
  • Step 2, build an AuthenticateClient:
    class AuthenticateClient extends http.BaseClient {
      final Map<String, String> headers;
    
      final http.Client client;
    
      AuthenticateClient(this.headers, this.client);
    
      Future<http.StreamedResponse> send(http.BaseRequest request) {
        return client.send(request..headers.addAll(headers));
      }
    }

    So as suggested in HTTP, this is using the BaseClient with extra authentication headers.

  • Step 3, create an authenticated HTTP client from steps 1 and 2 and access google drive API.
    final baseClient = new Client();
    final authenticateClient = AuthenticateClient(authHeader, baseClient);
    final driveApi = drive.DriveApi(authenticateClient);

Lots of amazing content coming up your way!! Subscribe to the newsletter to get the updates 馃檪

Conclusion:

Thank you for being with us on a Flutter Journey !!! Hope you gained what you were looking for.

Let everyone know what methods you have used in the past for this problem in flutter.

So in this article, we took a dive into learning how to use Google API in Flutter.

Don’t forget to drop your valuable suggestions in the comments below.

Keep聽Learning, Keep Fluttering !!! Stay Connected 馃檪

So do let us know if you need any further assistance with Flutter Development.

Flutter Agency聽is our portal Platform dedicated to聽Flutter Technology聽and聽Flutter Developers. The portal is full of cool resources from Flutter like聽Flutter Widget聽Guide,聽Flutter Projects,聽Code libs聽and etc.

Flutter Agency聽is one of the most popular online portals dedicated to Flutter Technology and daily thousands of unique visitors come to this portal to enhance their knowledge of聽Flutter

Leave a Reply