FLUTTER WEB: How To Use Google Places Autocomplete In Flutter Web? - flutter

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

You need to have separate api for this google placeAutocomple
var response = await _client.get("https://maps.googleapis.com/maps/api/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
To get lat long u need add geolocator
Future<void> _getCurrentPosition() async {
setState((){
_isLoading = true;
});
final hasPermission = await _handleLocationPermission();
if (!hasPermission) {
Geolocator.requestPermission();
return;
}
await Geolocator.getCurrentPosition(desiredAccuracy: LocationAccuracy.best).then((Position position) {
setState(() {
_position = position;
lang = _position?.longitude.toString() ?? '';
lat = _position?.latitude.toString() ?? '';
});
Log.d("Latitude ${lat} Longitude ${lang}");
setState((){
_isLoading = false;
});
}).catchError((e) {
setState((){
_isLoading = false;
});
warning(context,e.toString());
Geolocator.requestPermission();
Log.d('Catch error ${e.toString()}');
});
}