Flutter google places autocomplete nothing displayed after selection

Question

We have implemented flutter_google_places: ^0.3.0, we can have a list of adresses which is perfect. However, when we choose an adresse nothing is displayed. Added some controllers but remains impossible to show selection.

Thank you in advance for your help.

Currently using last flutter version.

class Adresses extends StatelessWidget {


Adresses({Key key, this.user}) : super(key: key);

  final UsersInformations user;
  final TextEditingController adresse = TextEditingController();



final _formKey = GlobalKey<FormState>();


 @override
  Widget build(BuildContext context) {
    final sessionToken = Uuid().v4();
    PlaceApiProvider places_provider = PlaceApiProvider(sessionToken);

return Container(
  child: Form(
    key: _formKey,
    child: TypeAheadFormField(
      suggestionsCallback: (pattern) async {
        return await places_provider.fetchSuggestions(pattern, 'fr');
      },
      itemBuilder: (context, suggestion) {
        return ListTile(
          title: Text(suggestion.description),
        );
      },
      onSuggestionSelected: (suggestion) async {
        Place places_details = await places_provider
            .getPlaceDetailFromId(suggestion['place_id']);

        this.adresse.text = suggestion['description'];

        user.setstreetNumber = places_details.streetNumber;
        user.setstreet = places_details.street;
        user.setcity = places_details.city;
        user.setzipCode = places_details.zipCode;
        user.setgeopoint = places_details.geopoint;

        print(this.adresse);
      },
      getImmediateSuggestions: true,
      hideSuggestionsOnKeyboardHide: false,
      hideOnEmpty: false,
      noItemsFoundBuilder: (context) => Padding(
        padding: EdgeInsets.all(8),
        child: Text('No Item Found'),
      ),
      textFieldConfiguration: TextFieldConfiguration(
        decoration: InputDecoration(
          enabledBorder: UnderlineInputBorder(
              borderSide: BorderSide(color: Colors.grey.shade300)),
          focusedBorder: UnderlineInputBorder(
              borderSide: BorderSide(color: Colors.deepPurple.shade900)),
          focusedErrorBorder: UnderlineInputBorder(
              borderSide: BorderSide(color: Colors.red.shade900)),
          errorBorder: UnderlineInputBorder(
              borderSide: BorderSide(color: Colors.red.shade900)),
          hintText: "Adresses",
        ),
        controller: this.adresse,
      ),
    ),
  ),
);

} }

Answer 1

Your code is difficult to read. I'll just leave a snippet of a working version here. Make sure to put it inside of a StatefulWidget .

Widget build(BuildContext context) {
  return ListTile(
    title: Text(_theAddress),
    trailing: IconButton(
      onPressed: () => openGooglePrediction(context).then(_updatePredictionResult), 
      icon: Icon(Icons.edit),
  );
}

Future<Prediction?> openGooglePrediction(BuildContext context) async {
  return await PlacesAutocomplete.show(
    context: context,
    apiKey: GOOGLE_API_KEY,
    mode: Mode.overlay,
    language: "en",
    strictbounds: false,
    components: [new Component(Component.country, "us")],
  );
}


void _updatePredictionResult(Prediction? prediction) async {
  if (prediction == null) return;

  PlacesDetailsResponse detail = await _places.getDetailsByPlaceId(
    prediction.placeId!,
  );

  setState(() {
    _theAddress = detail.result.name; // Or any other of the available formats
    _coord = Coordinates( // The coordinates if you need it
      lat: detail.result.geometry!.location.lat,
      lng: detail.result.geometry!.location.lng,
    );
  });
}