malik_hammad
malik_hammad

Reputation: 39

How can we add clickable tooltip when using syncfusion_flutter_maps package?

I am using package syncfusion_flutter_maps in flutter version 3.13. When i click on tooltip it close the tooltip. What I need is when i click on tooltip I can perform navigation or other VoidCallBack Func.

SfMaps(
              layers: [
                MapTileLayer(
                  urlTemplate:
                      'https://api.mapbox.com/styles/v1',
                  zoomPanBehavior: cntrlr.mapZoomPanBehavior,
                  tooltipSettings:
                      MapTooltipSettings(color: Colors.white, hideDelay: 5.0),
                  markerTooltipBuilder: (context, index) {
                    Map<String, dynamic>? feature = cntrlr.markerDetails[index];
                    return GestureDetector(
                      onTap: () {
                        print("Pressssed");
                      },
                      child: Container(
                        clipBehavior: Clip.antiAliasWithSaveLayer,
                        width: kWidth(context) / 2,
                        height: 200,
                        padding: const EdgeInsets.symmetric(
                            horizontal: 12, vertical: 8),
                        decoration: BoxDecoration(color: Colors.white),
                        child: Column(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Text(
                              feature['text'].toString(),
                              style: TextStyle(fontSize: 16),
                              maxLines: 2,
                              overflow: TextOverflow.ellipsis,
                            ),
                            SizedBox(
                              height: 12,
                            ),
                            Row(
                              // mainAxisAlignment: MainAxisAlignment.spaceBetween,
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: [
                                Image.asset(
                                  "assets/icons/location_red.png",
                                  height: 22,
                                  width: 22,
                                ),
                                SizedBox(
                                  width: 7,
                                ),
                                Expanded(
                                    child: Text(
                                  feature['place_name'].toString(),
                                  style: TextStyle(fontSize: 12),
                                  maxLines: 3,
                                  overflow: TextOverflow.ellipsis,
                                ))
                              ],
                            ),
                            SizedBox(
                              height: 12,
                            ),
                            Row(
                              mainAxisAlignment: MainAxisAlignment.spaceBetween,
                              children: [
                                InkWell(
                                  onTap: () {
                                     Navigator.push(
                                       context,
                                      MaterialPageRoute(
                                             builder: (_) =>
                                                 PreviewNavigationScreen(
                                                   latitude: double.parse(
                                                       feature['geometry']
                                                           ['coordinates'][1]),
                                                   longitude: double.parse(
                                                      feature['geometry']
                                                         ['coordinates'][0]),
                                       placeName: feature['place_name']
                                                 .toString(),
                                               )));
                                  },
                                  child: Image.asset(
                                    "assets/icons/route.png",
                                    height: 30,
                                    width: 30,
                                  ),
                                ),
                                Image.asset(
                                  "assets/icons/phone.png",
                                  height: 30,
                                  width: 30,
                                ),
                                Image.asset(
                                  "assets/icons/earth.png",
                                  height: 30,
                                  width: 30,
                                ),
                                Image.asset(
                                  "assets/icons/email.png",
                                  height: 30,
                                  width: 30,
                                ),
                              ],
                            )
                          ],
                        ),
                      ),
                    );
                  },
                  initialFocalLatLng:
                      MapLatLng(box.read('latitude'), box.read('longitude')),
                  controller: cntrlr.controller2,
                  initialMarkersCount: cntrlr.markers.length,
                  markerBuilder: (BuildContext context, int index) =>
                      cntrlr.markers[index],
                ),
              ],
            ),

enter image description here

Upvotes: 1

Views: 138

Answers (0)

Related Questions