FLUTTER WEB：如何在 Flutter Web 中使用 Google Places 自动完成功能？

Question

I used almost every package for places auto complete, I am getting cross error. Please let me know if there is any way to use places autocomplete In Android, iOS and web together.

 var p = await PlacesAutocomplete.show(
    radius: 500000,
    strictbounds: false,
    region: "in",
    language: "en",
    context: context,
    mode: Mode.overlay,
    apiKey: "key",
    components: [new Component(Component.country, "in")],
    types: ["(cities)"],
    hint: "Search City",
);

currently I am using this function

Answer 1

To use the Google Places Autocomplete API in a Flutter Web application, you will need to follow these steps:

Register for a Google Cloud Platform account and enable the Places API. Create a new project in the Google Cloud Console, and generate an API key. Add the google_maps_webservice package to your Flutter project's dependencies in the pubspec.yaml file. Import the package and use the GoogleMapsPlaces class to make requests to the Places API. Here is an example of how to use the autocomplete feature in a Flutter Web application:

import 'package:flutter/material.dart';
import 'package:google_maps_webservice/places.dart';

class PlacesAutocompletePage extends StatefulWidget {
  @override
  _PlacesAutocompletePageState createState() => _PlacesAutocompletePageState();
}

class _PlacesAutocompletePageState extends State<PlacesAutocompletePage> {
  final _placesAutocomplete = GoogleMapsPlaces(apiKey: 'YOUR_API_KEY');
  String _placeId;

  Future<void> _getPlacePredictions() async {
    final predictions = await _placesAutocomplete.autocomplete(
      input: 'Google',
    );

    for (final prediction in predictions.predictions) {
      print(prediction.description);
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Places Autocomplete'),
      ),
      body: Center(
        child: RaisedButton(
          onPressed: _getPlacePredictions,
          child: Text('Get Place Predictions'),
        ),
      ),
    );
  }
}

Answer 2

You need to have separate api for this google placeAutocomple

  ApiResponse response = await _client.get("place/autocomplete/json?input=$input"
          "&types=establishment&language=en&components=country:in&key=$kGoogleApiKey&sessiontoken=19");

and then show result in autocomplete textfield or listview.

  void getPlaces(input, lng,lat) {
    SearchLocation()
        .getPlaces(input: input, lang: lng,lat: lat)
        .then((value) => _placesResponse(value))
        .catchError((e) => _placesError(e));
  }

  _placesResponse(List<Place> v) {
    setState(() {
      addressList = v;
    });
  }

  _placesError(e) {
    errorSnackbar(context,e.toString());
  }

Listview Widget

ListView.builder(
                    itemCount: addressList.length,
                    shrinkWrap: true,
                    itemBuilder: (ctx, index) {
                      var address = addressList[index];
                      return Padding(
                        padding: const EdgeInsets.symmetric(horizontal: 12.0),
                        child: InkWell(
                          onTap: () {
                            if(_isLoading != true) {
                              getSelectedPlace(address.placeId);
                            }
                          },
                          child: Column(
                            children: [
                              Row(
                                children: [
                                  Container(
                                      width: 25,
                                      height: 25,
                                      decoration: BoxDecoration(color: Colors.grey, borderRadius: borderRadiusAll_30),
                                      child: Center(
                                          child: Icon(
                                        CupertinoIcons.location_solid,
                                        size: 14,
                                        color: Colors.white,
                                      ))),
                                  Flexible(
                                    fit: FlexFit.tight,
                                    child: Padding(
                                      padding: const EdgeInsets.only(left: 12.0),
                                      child: Text(
                                        address.description ?? '',
                                        style: GoogleFonts.sourceSans3(textStyle: textTheme.bodyText2),
                                        textAlign: TextAlign.left,
                                      ),
                                    ),
                                  ),
                                ],
                              ),
                              Padding(
                                padding: const EdgeInsets.symmetric(vertical: 4.0),
                                child: Divider(
                                  color: MyColor.kGrey,
                                ),
                              )
                            ],
                          ),
                        ),
                      );
                    }),

For this you need to have kGoogleApiKey