Update the Painted Decoration of The Widget from a Function

Question

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.

score 2 · Accepted Answer · answered Dec 28 '21 at 02:03

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),
              ),
            ),
          ],
        ),
      ),
    );
  }

I appreciate the answer but I was looking more into changing the position of the circle based on the new coordinates that location fetches. It is nice though knowing that I can change the color is there a way like my question was asking to change the position for the circle ? — Darke, Dec 28 '21 at 02:18
oops, my bad, the idea of changing position of circle of pin is not using Stack, you should create new image of pin like you did in the marked code, stack position will never match with map pin position — Jim, Dec 28 '21 at 02:21
I tried using marker from the google map package, but it seems like it only works for google maps and not any other image. Do you know or can point me in the right direction of how I could solve my problem ? — Darke, Dec 28 '21 at 02:26
this is a good reference, https://stackoverflow.com/questions/56597739/how-to-customize-google-maps-marker-icon-in-flutter — Jim, Dec 28 '21 at 02:38

Update the Painted Decoration of The Widget from a Function

1 Answers1