strokeColor property
Applies stroke color for the selected shape.
This snippet shows how to set stroke color for the selected shape.
late List<DataModel> _data;
late MapShapeSource _mapSource;
int _selectedIndex = -1;
@override
void initState() {
super.initState();
_data = <DataModel>[
DataModel('India', 280, "Low", Colors.red),
DataModel('United States of America', 190, "High", Colors.green),
DataModel('Pakistan', 37, "Low", Colors.yellow),
];
_mapSource = MapShapeSource.asset(
"assets/world_map.json",
shapeDataField: "name",
dataCount: _data.length,
primaryValueMapper: (int index) => _data[index].country,
shapeColorValueMapper: (int index) => _data[index].color,
);
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
height: 350,
child: Padding(
padding: EdgeInsets.only(left: 15, right: 15),
child: Column(
children: [
SfMaps(
layers: <MapLayer>[
MapShapeLayer(
source: _mapSource,
selectedIndex: _selectedIndex,
selectionSettings: MapSelectionSettings(
strokeColor: Colors.white,
strokeWidth: 2.0,
),
onSelectionChanged: (int index) {
setState(() {
_selectedIndex = (_selectedIndex == index) ?
-1 : index;
});
},
),
],
),
],
),
),
)),
);
}
}
class DataModel {
const DataModel(
this.country,
this.usersCount,
this.storage,
this.color,
);
final String country;
final double usersCount;
final String storage;
final Color color;
}
See also:
- Color, to set selected shape color.
Implementation
final Color? strokeColor;