Update the Painted Decoration of The Widget from a Function

Question

I don't know if the title is worded correctly, but I will try my best to explain my problem. I now have a function that updates the current user's location, which works fine. The problem is that the painted pointer remains at that exact position because the decoration is painted once inside the widget and never changes.

I have looked at how google does it with the marker object, but that didn't seem to work for my app because I am not using a normal map.

 void updateLocationPin(LocationData newLocalData, Uint8List imageData){
     LatLng latLng = LatLng(newLocalData.latitude!, newLocalData.longitude!);
     this.setState(() {
      /* marker = Marker(
         markerId: MarkerId("home"),
         position: latLng,
         rotation: 0.5,
         draggable: false,
         flat: true,
         zIndex: 2,
         anchor: Offset(0.5, 0.5),
         icon: BitmapDescriptor.fromBytes(imageData)
       );*/
       xPosition = latLng.longitude; 
       yPosition = latLng.latitude; 
       ScaffoldMessenger.of(context).showSnackBar( SnackBar( content: Text("Position: ${xPosition}, ${yPosition}"), duration: Duration(milliseconds: 5000), ), );
     });
   }

  @override
  Widget build(BuildContext context) {
    var dpr = MediaQuery.of(context).devicePixelRatio;
    return Scaffold(
      body: SafeArea(
        child: Stack(
          children: [
            GestureDetector(
              child: InteractiveViewer(
                transformationController: controller,
                constrained: false,
                minScale: 0.1,
                maxScale: 1.0,
                child: Stack(children: [
                  Image.asset(
                    "assets/images/$level",
                  ),
                  Positioned(
                    left: xPosition,
                    top: yPosition,
                    child: Container(
                      width: 50.0 / dpr,
                      height: 50.0 / dpr,
                      decoration: BoxDecoration(
                        shape: BoxShape.circle,
                        color: Colors.red,
                      ),
                    ),
                  ),
                ]),
                boundaryMargin: EdgeInsets.all(100),
              ),
            ),
          ],
        ),
      ),
    );
  }

How would I update the painted circle every time the updateLocationPin gets called? I should have probably pointed this out beforehand, but I am a complete beginner trying to learn by doing some self-coding, and any problems that I might have missed or incorrect code is highly appreciated if anyone would point it out. Thanks in advance, and happy Christmas to anyone reading.

Answer 1

try this:

 Color _newColor = Colors.red;
 void updateLocationPin(LocationData newLocalData, Uint8List imageData){
     LatLng latLng = LatLng(newLocalData.latitude!, newLocalData.longitude!);
     this.setState(() {
      /* marker = Marker(
         markerId: MarkerId("home"),
         position: latLng,
         rotation: 0.5,
         draggable: false,
         flat: true,
         zIndex: 2,
         anchor: Offset(0.5, 0.5),
         icon: BitmapDescriptor.fromBytes(imageData)
       );*/
       xPosition = latLng.longitude; 
       yPosition = latLng.latitude;
       _newColor = Colors.blue;
       ScaffoldMessenger.of(context).showSnackBar( SnackBar( content: Text("Position: ${xPosition}, ${yPosition}"), duration: Duration(milliseconds: 5000), ), );
     });
   }

  @override
  Widget build(BuildContext context) {
    var dpr = MediaQuery.of(context).devicePixelRatio;
    return Scaffold(
      body: SafeArea(
        child: Stack(
          children: [
            GestureDetector(
              child: InteractiveViewer(
                transformationController: controller,
                constrained: false,
                minScale: 0.1,
                maxScale: 1.0,
                child: Stack(children: [
                  Image.asset(
                    "assets/images/$level",
                  ),
                  Positioned(
                    left: xPosition,
                    top: yPosition,
                    child: Container(
                      width: 50.0 / dpr,
                      height: 50.0 / dpr,
                      decoration: BoxDecoration(
                        shape: BoxShape.circle,
                        color: _newColor,
                      ),
                    ),
                  ),
                ]),
                boundaryMargin: EdgeInsets.all(100),
              ),
            ),
          ],
        ),
      ),
    );
  }