How to show a widget when the marker is clicked on in gmap flutter? - flutter

Question

I want to show a widget with the latlong info and a button when the marker is placed on the map.or clicked on marker.
this is my code to handle the markers
Future<void> addMarker(
LatLng mLatLng, String mTitle, String mDescription) async {
final Uint8List markerIcon =
await getBytesFromAsset('assets/images/icons/pin.png', 100);
setState(() {
_markers.clear();
_markers.add(Marker(
markerId:
MarkerId((mTitle + "_" + _markers.length.toString()).toString()),
position: mLatLng,
infoWindow: InfoWindow(
title: mTitle,
snippet: mDescription,
),
icon: BitmapDescriptor.fromBytes(
markerIcon), //BitmapDescriptor.defaultMarker,
));
});
}
Future<void> _handleTap(LatLng tappedPoint) async {
print(tappedPoint);
final words = await api
.convertTo3wa(Coordinates(tappedPoint.latitude, tappedPoint.longitude))
.language('en')
.execute();
print(words.data()!.words);
LatLng mLatLng = tappedPoint;
String mTitle = '///${words.data()!.words}';
String mDescription =
'Coordinates: ${words.data()!.coordinates.lat}, ${words.data()!.coordinates.lng},\nNearest Place: ${words.data()!.nearestPlace}';
setState(() {
_markers.clear();
if (words.isSuccessful()) {
addMarker(mLatLng, mTitle, mDescription);
getPillInfowindow(mLatLng, mTitle, mDescription);
//_customInfoWindowController.hideInfoWindow!();
} else {
print(words.error());
}
});
}
and the widget i want shown when marker is clicked on is this
import 'package:flutter/material.dart';
import 'package:mymapp/screens/home_page.dart';
Widget getPillInfowindow(mLatLng, mTitle, mDescription) {
return Positioned(
bottom: 100, right: 0, left: 0,
child: Align(
alignment: Alignment.bottomCenter,
child: Container(
margin: EdgeInsets.all(20),
height: 70,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.all(Radius.circular(50)),
boxShadow: <BoxShadow>[
BoxShadow(
blurRadius: 20,
offset: Offset.zero,
color: Colors.grey.withOpacity(0.5))
]),
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
margin: EdgeInsets.only(left: 10),
width: 50,
height: 50,
child: ClipOval(
child: Image.asset('assets/images/icons/pin2.png',
fit: BoxFit.cover))),
// first widget
Expanded(
child: Container(
margin: EdgeInsets.only(left: 20),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text('title:${mTitle}', //${mTitle}',
style: TextStyle(
color: Colors
.green)), //currentlySelectedPin.labelColor)),
Text(
'Latitude, Longitude: ${mLatLng}',
style: TextStyle(fontSize: 12, color: Colors.grey)),
Text(
'Desc: ${mDescription}', //
style: TextStyle(fontSize: 12, color: Colors.grey))
], // end of Column Widgets
), // end of Column
),
), // second widget
],
),
),
),
); // end of Container
}
but somehow this doesn't work the way I want it to. What's wrong here?
Sorry if there's mistakes here, I'm a beginner in flutter

Answer 1

Future<void> _handleTap(LatLng tappedPoint) async {
// Your existing code to get the marker information
// ...
setState(() {
_markers.clear();
if (words.isSuccessful()) {
addMarker(mLatLng, mTitle, mDescription);
_pillInfoWindow = getPillInfowindow(mLatLng, mTitle, mDescription); // Update the _pillInfoWindow variable with the new marker information
} else {
print(words.error());
}
});
}
then
Stack(
children: [
GoogleMap(
// ... your existing GoogleMap widget code ...
onMapCreated: (GoogleMapController controller) {
_mapController = controller;
},
onTap: _handleTap,
markers: _markers,
),
if (_pillInfoWindow != null) _pillInfoWindow!, // Add the _pillInfoWindow widget to the Stack
],
)