Giter Club home page Giter Club logo

Comments (10)

rorystephenson avatar rorystephenson commented on August 22, 2024

Hi @RafikRekhis, I'd be happy to help but I'll need some more context. If you can provide me with a minimal reproducible example (something I can run, as simplified as possible that still causes the exception) I can have a look.

from flutter_map_marker_popup.

juliaen-dr avatar juliaen-dr commented on August 22, 2024

We got the exact same problem I think.

We have some marker layer with a popup and some without. If I add two marker layers, one MarkerLayer and one PopupMarkerLayer, the problem is that the marker from the MarkerLayer will always be above the popup from the marker in the PopupMarkerLayer. In order to fix this we use two PopupMarkerLayer and simply just don't display the popup if we don't need it. But when using more than one PopupMarkerLayer we get the Multiple widgets used the same GlobalKey Error.

from flutter_map_marker_popup.

rorystephenson avatar rorystephenson commented on August 22, 2024

@juliaen-dr can you provide a minimal reproducible example?

from flutter_map_marker_popup.

juliaen-dr avatar juliaen-dr commented on August 22, 2024

Sadly I can't share my code here but I tried to build an example. Basically just take a FlutterMap and add two MarkerLayer with popups. Now if you click on a Marker to open the popup you'll get the error.

FlutterMap(
   mapController: _animatedMapController.mapController,
   options: _mapOptions,
   nonRotatedChildren: [],
   children: [
         MarkerClusterLayerWidget(
            options: MarkerClusterLayerOptions(
              maxClusterRadius: 50,
              size: const Size(40, 40),
              anchorPos: AnchorPos.align(AnchorAlign.center),
              markers: _marker,
              onMarkerTap: (marker) {
               _onMarkerTap(marker);
              },
              popupOptions: PopupOptions(
                popupBuilder: (BuildContext context, Marker marker) {
                    return buildMarkerPopup(marker, constraints.maxHeight);
                },
                popupController: _popupController,
                buildPopupOnHover: false,
                markerTapBehavior: MarkerTapBehavior.togglePopupAndHideRest(),
                      popupAnimation: const PopupAnimation.fade(),
               )
             ),
             builder: (context, markers) {
               return Container();
             },
           ),
        ),
         MarkerClusterLayerWidget(
            options: MarkerClusterLayerOptions(
              maxClusterRadius: 50,
              size: const Size(40, 40),
              anchorPos: AnchorPos.align(AnchorAlign.center),
              markers: _marker2,
              onMarkerTap: (marker) {
               _onMarkerTap(marker);
              },
              popupOptions: PopupOptions(
                popupBuilder: (BuildContext context, Marker marker) {
                    return buildMarkerPopup(marker, constraints.maxHeight);
                },
                popupController: _popupController,
                buildPopupOnHover: false,
                markerTapBehavior: MarkerTapBehavior.togglePopupAndHideRest(),
                      popupAnimation: const PopupAnimation.fade(),
               )
             ),
             builder: (context, markers) {
               return Container();
             },
           ),
        ),
   ],
);

from flutter_map_marker_popup.

rorystephenson avatar rorystephenson commented on August 22, 2024

@juliaen-dr MarkerClusterLayerWidget is from another package, you should open your issue in that repo. I no longer provide support for that package as I maintain my own marker clustering package with popup support.

from flutter_map_marker_popup.

rorystephenson avatar rorystephenson commented on August 22, 2024

If this issue persists when using flutter_map_marker_popup alone I will be happy to look in to it if someone can provide me a minimal runnable reproduction of the error.

from flutter_map_marker_popup.

HukehrsEngineering avatar HukehrsEngineering commented on August 22, 2024

Hey!

I was able to reproduce this bug: For me this happens when multiple PopupMarkerLayers are sharing a single PopupController.

Minimal example:

import 'package:flutter_map/flutter_map.dart';
import 'package:flutter_map_marker_popup/flutter_map_marker_popup.dart';
import 'package:latlong2/latlong.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  MyApp({super.key});

  final _controller = PopupController();

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: Scaffold(
        body: FlutterMap(
          options: const MapOptions(
            initialZoom: 1,
          ),
          children: [
            TileLayer(
              urlTemplate: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
              userAgentPackageName: 'flutter_map_marker_popup',
            ),
            PopupMarkerLayer(options: _popupMarkerLayerFor(["qwe", "asd"])),
            PopupMarkerLayer(options: _popupMarkerLayerFor(["hjk", "jkl"])),
          ],
        ),
        ),
      );
  }

  PopupMarkerLayerOptions _popupMarkerLayerFor(List<String> list) {
    return PopupMarkerLayerOptions(
      markers: list.map((e) => Marker(point: LatLng(e.hashCode % 90, e.hashCode % 180), child: Text(e))).toList(),
      markerTapBehavior: MarkerTapBehavior.togglePopupAndHideRest(),
      markerCenterAnimation: const MarkerCenterAnimation(),
      popupController: _controller,
      popupDisplayOptions: PopupDisplayOptions(
        builder: (context, Marker marker) {
          return Card(
            child: marker.child,
          );
        },
      ),
    );
  }
}

Thanks for the hard work! :)

from flutter_map_marker_popup.

rorystephenson avatar rorystephenson commented on August 22, 2024

Ah interesting, is there a use case for having them share a controller? I can't think of one right now. If there is none I will either document that this is not supported or see if I can add a warning when a shared controller is detected.

from flutter_map_marker_popup.

HukehrsEngineering avatar HukehrsEngineering commented on August 22, 2024

from flutter_map_marker_popup.

jiazeh avatar jiazeh commented on August 22, 2024

Hi All,
When there are multiple PopupMarkerLayer, as long as PopupDisplayOptions is not added, similar errors will not occur.
Minimal example:

import 'package:flutter/material.dart';
import 'package:flutter_map/flutter_map.dart';
import 'package:flutter_map_marker_popup/flutter_map_marker_popup.dart';
import 'package:latlong2/latlong.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  MyApp({super.key});

  final PopupController _popupController = PopupController();

  static final List<LatLng> _markersA = [
    const LatLng(44.421, 10.404),
    const LatLng(45.683, 10.839),
    const LatLng(45.246, 5.783),
  ];
  static final List<LatLng> _markersB = [
    const LatLng(39.421, 10.404),
    const LatLng(40.683, 10.839),
    const LatLng(40.246, 5.783),
  ];

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: Scaffold(
        body: PopupScope(
          popupController: _popupController,
          onPopupEvent: (event, selectedMarkers) {
            debugPrint('$event: $selectedMarkers');
          },
          child: FlutterMap(
            options: const MapOptions(
              initialCenter: LatLng(42.5, 10.51),
              initialZoom: 6.0,
            ),
            children: [
              TileLayer(
                urlTemplate: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
                userAgentPackageName: 'flutter_map_marker_popup',
              ),
              PopupMarkerLayer(options: _popupMarkerLayerFor(_markersA)),
              PopupMarkerLayer(options: _popupMarkerLayerFor(_markersB)),
              PopupLayer(
                popupDisplayOptions: PopupDisplayOptions(
                    builder: (BuildContext context, Marker marker) {
                  return Card(
                    color: Colors.white,
                    child: Padding(
                      padding: const EdgeInsets.all(10),
                      child: GestureDetector(
                        onTap: () => debugPrint('Popup tap!'),
                        child: const Text(
                          'Container popup for marker',
                        ),
                      ),
                    ),
                  );
                }),
              ),
            ],
          ),
        ),
      ),
    );
  }

  PopupMarkerLayerOptions _popupMarkerLayerFor(List<LatLng> list) {
    return PopupMarkerLayerOptions(
      markers: list.map((latLng) {
        return Marker(point: latLng, child: const Icon(Icons.pin_drop));
      }).toList(),
      markerTapBehavior: MarkerTapBehavior.togglePopupAndHideRest(),
      markerCenterAnimation: const MarkerCenterAnimation(),
      popupController: _popupController,
      /*
      // Enabling this will throw an exception:
      // Multiple widgets used the same GlobalKey.
      popupDisplayOptions: PopupDisplayOptions(
       builder: (context, Marker marker) {
         return Card(
           child: marker.child,
         );
       },
      ),
      */
    );
  }
}

from flutter_map_marker_popup.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.