I have the following widget to deploy a world map from an svg file. It works fine and I can select different cities and change colors and what not. However now I need to display the city name when the city is selected just above the city but the position and size I get back are always the same no matter which city I select.

The values only change when I move the map around so I’m assuming the values are based off of the map entirely/SizedBox widget and not the City/Container widget itself.

I’ve tried placing the key in the Container and the ClipPath widgets as well and no difference it still displays values of the SizedBox instead of the Container itself.

BlocBuilder<SomaliHubMapCubit, SomaliHubMapState>(
  bloc: _somaliHubMapCubit,
  builder: (context, state) {
    if (state.status == StateStatus.loading) {
      return Center(
        child: PlatformCircularProgressIndicator(),
      );
    }

    if (state.status == StateStatus.failure) {
      return Center(
        child: Text(
          i18n.common.errorOccurred,
          style: theme.textTheme.bodyMedium?.copyWith(
            color: Colors.white,
          ),
        ),
      );
    }

    for (final city in state.cities) {
      if (_cityKeys[city] == null) {
        _cityKeys[city] = GlobalKey();
      }
    }

    return InteractiveViewer(
      transformationController: _transformationController,
      constrained: false,
      boundaryMargin: const EdgeInsets.symmetric(
        vertical: 200.0,
        horizontal: 100.0,
      ),
      minScale: 0.3,
      maxScale: 8.0,
      child: SizedBox(
        width: 1300.0,
        height: 750.0,
        child: Stack(
          children: <Widget>[
            for (final city in state.cities)
              ClipPath(
                clipper: _Clipper(svgPath: city.path),
                child: GestureDetector(
                  key: _cityKeys[city],
                  onTap: () {
                    _somaliHubMapCubit.updateCity(city);

                    final cityRenderBox = _cityKeys[city]
                        ?.currentContext
                        ?.findRenderObject() as RenderBox?;

                    if (cityRenderBox != null &&
                        cityRenderBox.hasSize) {
                      final cityPosition =
                          cityRenderBox.localToGlobal(Offset.zero);
                      print(
                          "City: $city, RenderBox size: ${cityRenderBox.paintBounds.size}");
                      print(
                          "City: $city, RenderBox position: $cityPosition");
                    } else {
                      print(
                          "City: $city, RenderBox not available or has no size");
                    }
                  },
                  child: Container(
                    color: state.selectedCity?.path == city.path
                        ? Colors.blueAccent
                        : Colors.white,
                  ),
                ),
              ),
          ],
        ),
      ),
    );
  });

Logs:

flutter: City: SomaliHubCity(path: M312.1 273.6H305.1L301.6 267.5L305.1 261.5H312.1L315.5 267.5L312.1 273.6Z, color: Color(0xffffffff)), RenderBox size: Size(1300.0, 750.0)
flutter: City: SomaliHubCity(path: M312.1 273.6H305.1L301.6 267.5L305.1 261.5H312.1L315.5 267.5L312.1 273.6Z, color: Color(0xffffffff)), RenderBox position: Offset(-215.0, 93.2)
flutter: City: SomaliHubCity(path: M325.1 281.1H318.2L314.7 275.1L318.2 269H325.1L328.6 275.1L325.1 281.1Z, color: Color(0xffffffff)), RenderBox size: Size(1300.0, 750.0)
flutter: City: SomaliHubCity(path: M325.1 281.1H318.2L314.7 275.1L318.2 269H325.1L328.6 275.1L325.1 281.1Z, color: Color(0xffffffff)), RenderBox position: Offset(-215.0, 93.2)
flutter: City: SomaliHubCity(path: M403.4 627.7H396.5L393 621.7L396.5 615.7H403.4L406.9 621.7L403.4 627.7Z, color: Color(0xffffffff)), RenderBox size: Size(1300.0, 750.0)
flutter: City: SomaliHubCity(path: M403.4 627.7H396.5L393 621.7L396.5 615.7H403.4L406.9 621.7L403.4 627.7Z, color: Color(0xffffffff)), RenderBox position: Offset(-214.7, 93.2)
flutter: City: SomaliHubCity(path: M442.6 575H435.6L432.1 568.9L435.6 562.9H442.6L446.1 568.9L442.6 575Z, color: Color(0xffffffff)), RenderBox size: Size(1300.0, 750.0)
flutter: City: SomaliHubCity(path: M442.6 575H435.6L432.1 568.9L435.6 562.9H442.6L446.1 568.9L442.6 575Z, color: Color(0xffffffff)), RenderBox position: Offset(-214.7, 93.2)

To clarify, the goal is to log/get access to the position of the drawn city.