How to create a simple google maps address search with autocomplete in flutter and get latitude and longitude?

Question

I\'m new at Flutter and I\'m trying to build a simple google maps app. I\'ve already implemented google maps to the app and it is running perfect.

But now I want to

Answer 1

If you're interested in seeing how to do this so that the places api can return data into a custom list view this video will show you how https://youtu.be/rJOkoAmC5GY

Answer 2

You can use flutter_google_places plugin which shows the places in the autocomplete list as you type it and also returns lat and long of the place/address selected.

===== working code =======

1. Add flutter_google_places plugin and import it in your dart file.
2. Add geo_coder plugin and import it in same dart file. (Required to access geocoding services)
3. Generate google api key for your project.

main.dart:

void main() => runApp(MyApp());

const kGoogleApiKey = "Api_key";

GoogleMapsPlaces _places = GoogleMapsPlaces(apiKey: kGoogleApiKey);

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: demo(),
      ),
    );
  }
}

class demo extends StatefulWidget {
  @override
  demoState createState() => new demoState();
}

class demoState extends State<demo> {
  @override
  Widget build(BuildContext context) {

    return Scaffold(
      body: Container(
        alignment: Alignment.center,
        child: RaisedButton(
          onPressed: () async {
            // show input autocomplete with selected mode
            // then get the Prediction selected
            Prediction p = await PlacesAutocomplete.show(
                context: context, apiKey: kGoogleApiKey);
            displayPrediction(p);
          },
          child: Text('Find address'),

        )
      )
    );
  }

  Future<Null> displayPrediction(Prediction p) async {
    if (p != null) {
      PlacesDetailsResponse detail =
      await _places.getDetailsByPlaceId(p.placeId);

      var placeId = p.placeId;
      double lat = detail.result.geometry.location.lat;
      double lng = detail.result.geometry.location.lng;

      var address = await Geocoder.local.findAddressesFromQuery(p.description);

      print(lat);
      print(lng);
    }
  }
}

result:

When you tap on Find Address button, it opens new screen with built-in search app bar in which you can type address / place you are looking for which shows corresponding results in autocomplete list and prints lat and long of the place you selected.

lat: 52.3679843
lng: 4.9035614

Hope this answers your question.