Блог

Я хочу создать круги, радиус которых выбирается пользователями в flutter. Когда я меняю параметры, круг всегда остается неподвижным на экране и не меняется. Мне нужно перезагрузиться, чтобы изображение на экране изменилось. Я искал, как это исправить, но не смог найти решения. Я использовал функцию setstate, но она не сработала. Как я могу изменить изображение на экране при изменении радиуса?

   LatLng _initialCameraPosition = LatLng(37.77483, -122.41942);
  late GoogleMapController _controller;
  String dropdownValue = '100';
  
 Set<Circle> _circles = HashSet<Circle>();

  void _setCircles(String radius) async {
    
    var position = await Geolocator.getCurrentPosition(
        desiredAccuracy: LocationAccuracy.high);
    
    setState(() {
      _circles.add(
        Circle(
            circleId: CircleId("0"),
            center: LatLng(position.latitude, position.longitude),
            radius: double.parse(radius),
            strokeWidth: 2,
            fillColor: Color.fromRGBO(102, 51, 153, .5)),
      );
    });
  }
  @override
  void initState() {
    super.initState();
    _setCircles(dropdownValue);
  }
  void _onMapCreated(GoogleMapController _cntlr) {
    _controller = _cntlr;   
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          Expanded(
            flex: 10,
            child: SizedBox(
              child: GoogleMap(
                initialCameraPosition:
                    CameraPosition(target: _initialCameraPosition),
                mapType: MapType.normal,
                onMapCreated: _onMapCreated,
                myLocationEnabled: true,
                circles: _circles,
              ),
            ),
          ),
          Expanded(
            flex: 1,
            child: DropdownButton<String>(
              value: dropdownValue,
              icon: const Icon(Icons.arrow_downward),
              iconSize: 24,
              elevation: 16,
              style: const TextStyle(color: Colors.deepPurple),
              underline: Container(
                height: 2,
                color: Colors.deepPurpleAccent,
              ),
              onChanged: (String? newValue) {
                setState(() {
                  dropdownValue = newValue!;
                  _setCircles(newValue);
                });
              },
              //onTap: () => updateStatus(dropdownValue),
              items: <String>[
                '100',
                '250',
                '500',
                '1000',
              ].map<DropdownMenuItem<String>>((String value) {
                return DropdownMenuItem<String>(
                  value: value,
                  child: Text(value),
                );
              }).toList(),
            ),
          ),
        ],
      ),
    );
  }
}
 

ПРАВКА, которую я написал _circles.clear(); перед добавлением функции. Это сработало для меня

попробуйте этот метод _setCircles должен находиться за пределами setState

  LatLng _initialCameraPosition = LatLng(37.77483, -122.41942);
  late GoogleMapController _controller;
  String dropdownValue = '100';
  
 Set<Circle> _circles = HashSet<Circle>();

  void _setCircles(String radius) async {
    
    var position = await Geolocator.getCurrentPosition(
        desiredAccuracy: LocationAccuracy.high);
    
    setState(() {
      _circles.add(
        Circle(
            circleId: CircleId("0"),
            center: LatLng(position.latitude, position.longitude),
            radius: double.parse(radius),
            strokeWidth: 2,
            fillColor: Color.fromRGBO(102, 51, 153, .5)),
      );
    });
  }
  @override
  void initState() {
    super.initState();
    _setCircles(dropdownValue);
  }
  void _onMapCreated(GoogleMapController _cntlr) {
    _controller = _cntlr;   
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          Expanded(
            flex: 10,
            child: SizedBox(
              child: GoogleMap(
                initialCameraPosition:
                    CameraPosition(target: _initialCameraPosition),
                mapType: MapType.normal,
                onMapCreated: _onMapCreated,
                myLocationEnabled: true,
                circles: _circles,
              ),
            ),
          ),
          Expanded(
            flex: 1,
            child: DropdownButton<String>(
              value: dropdownValue,
              icon: const Icon(Icons.arrow_downward),
              iconSize: 24,
              elevation: 16,
              style: const TextStyle(color: Colors.deepPurple),
              underline: Container(
                height: 2,
                color: Colors.deepPurpleAccent,
              ),
              onChanged: (String? newValue) {
                setState(() {
                  dropdownValue = newValue!;
                  
                });
                         _setCircles(newValue);
              },
              //onTap: () => updateStatus(dropdownValue),
              items: <String>[
                '100',
                '250',
                '500',
                '1000',
              ].map<DropdownMenuItem<String>>((String value) {
                return DropdownMenuItem<String>(
                  value: value,
                  child: Text(value),
                );
              }).toList(),
            ),
          ),
        ],
      ),
    );
  }
}