Flutter change radius of drawed circle by buttons - flutter

Question

As a follow up to the article of this link. I am working on a Flutter Project in which I want to increase the radius of a circle by means of two buttons.
Now I have partly succeeded, but it does not work quite well yet. I don't really know exactly how to explain this, but I will try my best:
What happened is that as soon as I press the minus button it goes a step smaller. If I press the minus button again, it will become a little smaller again. But as soon as I press the plus again, it remains the same size until I pass the number which was highest.
A video of the problem if its not be clearly explained.
Maybe someone knows how to handle this?
The Code (removed the unnecessary code):
class _AddRayPageState extends State<AddRayPage> {
List<Marker> myMarker = [];
final Set<Circle> circle = {};
GoogleMapController mapController;
int _n = 8;
LatLng startLoc = LatLng(52.0907374, 5.1214201);
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Toevoegen'),
),
body: Stack(children: <Widget>[
GoogleMap(
onMapCreated: onMapCreated,
markers: Set.from(myMarker),
initialCameraPosition: CameraPosition(target: startLoc, zoom: 8),
circles: circle,
),
]),
floatingActionButton: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Padding(
padding: const EdgeInsets.only(left: 40.0),
child: Container(
child: Row(
children: <Widget>[
Container(
width: 40.0,
height: 40.0,
child: new FloatingActionButton(
heroTag: "btnAdd",
onPressed: add,
child: new Icon(
Icons.add,
color: Colors.black,
size: 30,
),
backgroundColor: Colors.white,
),
),
new Text('$_n', style: new TextStyle(fontSize: 40.0)),
Container(
width: 40.0,
height: 40.0,
child: new FloatingActionButton(
heroTag: "btnMinus",
onPressed: minus,
child: new Icon(
const IconData(0xe15b, fontFamily: 'MaterialIcons'),
color: Colors.black,
size: 30,
),
backgroundColor: Colors.white,
),
),
],
),
),
),
],
),
);
}
void add() {
setState(() {
_n++;
});
addRadiusToMap(_n);
}
void minus() {
setState(() {
if (_n != 1) _n--;
});
addRadiusToMap(_n);
}
void addRadiusToMap(radius) {
setState(() {
double reciprocal(double d) => 1000 * d;
circle.add(Circle(
circleId: CircleId("1"),
center: startLoc,
radius: reciprocal(radius.toDouble()),
));
});
}

Answer 1

circle is a Set, a Set doesn't allow repeated objects, in addRadiusToMap you're adding a new Circle object but if there is a previous one with the same fields (7 and 8 already existed) it won't add it, I think the widget GoogleMaps doesn't see a change in the Set<Circle> and doesn't update/animate the new Circle, for now try adding circle.clear() before adding if the add return false(returns false and the set is not changed)
void add() {
setState(() {
_n++;
addRadiusToMap(_n);
});
}
void minus() {
if (_n != 1)
setState(() {
_n--;
addRadiusToMap(_n);
});
}
void addRadiusToMap(radius) {
//No purpose in having 2 setState
double reciprocal(double d) => 1000 * d;
circle.clear(); //Maybe clear the set before adding to avoid repeated values
circle.add(Circle(
circleId: CircleId("1"),
center: startLoc,
radius: reciprocal(radius.toDouble()),
));
}
I'm not really sure (I haven't used the Google Maps package) what's the purpose of having a Set<Circle> but as far as I understand the code, the Set is not really updated because you already has those values