dashArray property

List<double>? dashArray

Apply dash pattern for the polyline.

A sequence of dash and gap will be rendered based on the values in this list. Once all values of the list is rendered, it will be repeated again till the end of the polyline.

 late MapZoomPanBehavior _zoomPanBehavior;
 late List<MapLatLng> _polyLines;
 late MapShapeSource _mapSource;

  @override
  void initState() {
    _polyLines = <MapLatLng>[
      MapLatLng(13.0827, 80.2707),
      MapLatLng(14.4673, 78.8242),
      MapLatLng(14.9091, 78.0092),
      MapLatLng(16.2160, 77.3566),
      MapLatLng(17.1557, 76.8697),
      MapLatLng(18.0975, 75.4249),
      MapLatLng(18.5204, 73.8567),
      MapLatLng(19.0760, 72.8777),
    ];

    _mapSource = MapShapeSource.asset(
      'assets/india.json',
      shapeDataField: 'name',
    );

    _zoomPanBehavior = MapZoomPanBehavior(
        zoomLevel: 3, focalLatLng: MapLatLng(15.3173, 76.7139));
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Polyline')),
      body: SfMaps(
        layers: [
          MapShapeLayer(
            source: _mapSource,
            sublayers: [
              MapPolylineLayer(
                polylines: List<MapPolyline>.generate(
                  1,
                  (int index) {
                    return MapPolyline(
                      points: _polyLines,
                      dashArray: [8, 3, 4, 3],
                    );
                  },
                ).toSet(),
              ),
            ],
            zoomPanBehavior: _zoomPanBehavior,
          ),
        ],
      ),
    );
  }

See also:

• The MapPolylineLayer.dashArray, to apply same dash pattern for all polylines.

Implementation

final List<double>? dashArray;