Dynamically update color of a shape sublayer

[Neil]

Hi

I'm interested to know the feasibility of updating the color of a sublayer shape programmatically. The sublayer shape would need to be programmatically selected using the shapeDataField, with updates flowing asynchronously via a Firebase stream or Provider.

Thanks.

[Praveen Gopalsamy]

Hi Neil, 

Greetings from Syncfusion support. 

You can dynamically update the shapeDataFeild and color of the shape sublayer in SfMaps. We have attached the code snippet for your reference. 

bool _showSubLayerState = false; 

  late MapZoomPanBehavior _mapZoomPanBehavior; 

  late MapShapeSource _shapeLayerSource; 

  late MapShapeSource _shapeSublayerSource; 

 

  void _updateSublayerSource() { 

    _shapeSublayerSource = MapShapeSource.asset( 

      'assets/australia.json', 

      shapeDataField: _showSubLayerState ? 'STATE_NAME' : 'CONTINENT_NAME', 

    ); 

  } 

 

  @override 

  void initState() { 

    super.initState(); 

    _mapZoomPanBehavior = MapZoomPanBehavior(); 

    _shapeLayerSource = MapShapeSource.asset( 

      'assets/world_map.json', 

      shapeDataField: 'name', 

    ); 

    _updateSublayerSource(); 

  } 

 

  @override 

  Widget build(BuildContext context) { 

    return Scaffold( 

      appBar: AppBar(title: Text('Basic Sublayer')), 

      body: Column( 

        children: [ 

          Expanded( 

            child: MapShapeLayer( 

              source: _shapeLayerSource, 

              zoomPanBehavior: _mapZoomPanBehavior, 

              sublayers: [ 

                MapShapeSublayer( 

                  source: _shapeSublayerSource, 

                  color: _showSubLayerState ? Colors.brown : Colors.orange, 

                  strokeColor: Colors.black, 

                  strokeWidth: 0.5, 

                ), 

              ], 

            ), 

          ), 

          RawMaterialButton( 

            onPressed: () { 

              setState(() { 

                _showSubLayerState = !_showSubLayerState; 

                _updateSublayerSource(); 

              }); 

            }, 

            fillColor: Colors.blue, 

            child: Padding( 

              padding: const EdgeInsets.all(8.0), 

              child: Text(_showSubLayerState 

                  ? 'Hide Australia States' 

                  : 'Show Australia States'), 

            ), 

          ) 

        ], 

      ), 

    ); 

  } 

Please let us know if you need any further assistance in this. 

Regards,
Praveen G. 

[Neil]

Thanks for this, I will see how I can incorporate it into my project. I have one follow-up for now, would it also be possible to animate the colour change?

[Lakshmi Radha Krishnan]

Hi Neil, 

Currently, we have added animatable color change option only while doing selection and hover actions. There is no option to change layer color with animation dynamically. Kindly let us know if you need any other assistance. 

Reference link - https://help.syncfusion.com/flutter/maps/selection#enable-shape-selection  

Regards, 

Lakshmi R.