How to Implement Google Places Autocomplete in Flutter Web App?

Introduction

In the flutter web app, whenever we call an API with a different domain, then we receive the CORS error (i.e., Cross-Origin Resource Sharing). It means the browser assumes a security breach and blocks the request.

Most people also faced this issue while implementing the Google Places Autocomplete feature for their flutter web applications, as it is a very common feature for most E-Commerce applications. The developers who are developing their web applications in flutter want their users to enter the location along with latitude & longitude to get more accurate results. Many are using the Google Places Autocomplete REST API to achieve the same. Hence implementing the proxy where they have hosted their web app, is extremely important because the challenge they will face at this stage is CORS.

Here comes an easy solution to implement this without CORS error.

Let’s understand the CORS error first.

What is CORS Error?

CORS stands for Cross-Origin Resource Sharing.

Let’s understand this with a story. Suppose we have 2 web apps with the given domains as stated below:

  1. Flutter App - www.flutterapp.com
  2. Backend App (with APIs for frontend) - www.backendapp.com

Now, we will make an API request from the front end, i.e., from Flutter App, and that request will be captured by the Backend app (www.backendapp.com), in which our APIs are also present.

Whenever we request an API from the Flutter app (www.flutterapp.com), we declare the API’s BASE URL as www.backendapp.com, the path from our backend app. We get the 403 (FORBIDDEN) status code and no response on the app, which we can call a CORS issue/error.

As we can see, the sender & receiver are not on the same domain, which means the request origin and response processor are different, and hence is a cross-origin request, for which the browser defaults and, due to security reasons, block this request.

Whenever we open any URL on our browser, the browser always wants the request from the opened web URL to go to the subpaths of the same URL, so if you request another web URL from the currently opened URL, then you’ll always see this issue.

The Solution

Now we come to know that whenever we make a request through REST API for Google Places Autocomplete in our flutter web apps, we will get the CORS error, so to overcome this, Google Maps also has one more API to handle this situation, i.e., Google Places Autocomplete JavaScript API.

Today we will discuss one package, available on pub.dev, which is built around the JavaScript API. You can check this package here. Let’s understand this with the code now.

NOTE: Before executing the below code on your browser, please enable the Maps JavaScript API in Google Cloud, otherwise your request will get blocked. For more info on this click here*.*


    
import 'package:flutter/material.dart';

import 'package:flutter\_google\_places\_sdk/flutter\_google\_places\_sdk.dart';

void main() {

  runApp(MaterialApp(

    home: Scaffold(

      body: Center(

        child: ElevatedButton(

          onPressed: () async {

            final places = FlutterGooglePlacesSdk('my-key');

            final predictions =

                await places.findAutocompletePredictions('Tel Aviv');

            print('Result: $predictions');

          },

          child: Text('Predict and print to console'),

        ),

      ),

    ),

  ));

}
    

Also, to get the latitude and longitude through this package, you can use one more function created by the creator of this package i.e. fetchPlace.

Just copy and paste the above code snippet into your flutter web project and see the magic. I would really like to appreciate and say thanks to the creator of this package sparta.guru.

I hope you’ve liked this post and found it useful and CORS errorless for your flutter web applications.

Written By:
Siddhant Satpute

Mobile Team Lead

NestorBird

    last updated 11 months ago