RJrules64
RJrules64

Reputation: 65

Flutter Map - How can I let the user draw a circle?

I'm trying to let the user drag across the screen to draw a circle. initial point of the drag would set the center and the final point of the drag would set the radius.

I know I could easily do this with two taps, first tap for center, second for radius, but I'd really like to get the drag working if possible.

This is what I have so far. It kiiiind of works but the user has to (a) release their finger after the first long press (b) pan the map to set the size of the circle. Ideally the map camera should be locked in place while the circle is drawn.

Widget _displayMap() {
    return FlutterMap(
      mapController: createMapController,
      options: MapOptions(
        onLongPress: (tapPosition, latLng) {
          if (circleSelected) {
            print("setting center");
            setState(() {
              circleCenter = latLng;
              mapCircle = CircleMarker(
                point: latLng,
                radius: 0.0,
                color: isLightMode ? colourPrimaryTrans : colourSecondaryTransDark,
                borderColor: isLightMode ? colourPrimary : colourSecondaryDark,
                borderStrokeWidth: 5,
              );
            });
          }
        },
        onPositionChanged: (position, bool hasGesture) {
          if (circleSelected && circleCenter != null && hasGesture) {
            double radius = const Distance().as(LengthUnit.Meter, circleCenter!, position.center!);
            print("setting radius");
            setState(() {
              mapCircle = CircleMarker(
                point: circleCenter!,
                radius: radius,
                color: isLightMode ? colourPrimaryTrans : colourSecondaryTransDark,
                borderColor: isLightMode ? colourPrimary : colourSecondaryDark,
                borderStrokeWidth: 5,
              );
            });
          }
        },
      )
    )
  }

Edit: Here is a GIF of where this part of my code currently stands: https://imgur.com/a/3iuIZVJ

I have changed it to the following, but still want to implement a drag action.

if(circleSelected){
                  if(circleFirstClick){
                    mapCircleSetting = null;
                    circleCenterSetting = latLng;
                    circleFirstClick = false;
                    circleCenterMarker = Marker(
                      rotate: true,
                      point: circleCenterSetting!, 
                      child: OverflowBox(maxHeight: 100, maxWidth:200,
                        child: Column(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: [
                            Icon(Icons.location_on, color: isLightMode? colourPrimary:colourPrimaryDark,),
                            const Text(
                                  "Center",
                                  textAlign: TextAlign.center,
                                  style: TextStyle(
                                    fontWeight: FontWeight.bold),
                                ),
                          ]
                        ),
                      )
                      );
                  } else {
                    circleFirstClick = true;
                    mapRadiusSetting = const Distance().as(LengthUnit.Meter, circleCenterSetting!, latLng);
                    mapCircleSetting = CircleMarker(
                      point: circleCenterSetting!,
                      useRadiusInMeter: true,
                      radius: mapRadiusSetting!,
                      color: isLightMode ? colourPrimaryTrans : colourPrimaryTransDark,
                      borderColor: isLightMode ? colourPrimary : colourPrimaryDark,
                      borderStrokeWidth: 5,
                    ); 
                  }
                }

Upvotes: 1

Views: 359

Answers (0)

Related Questions