How to have pointer on legend while hovering tiles in Flutter Treemap?
In Flutter Treemap, you can display a legend pointer when hovering over the tiles by following these steps.
Step 1: Add Syncfusion® Flutter Treemap package to your dependencies in pubspec.yaml file and initialize the data source in the initState() method.
late List<AustraliaPopulationData> _populationData;
@override
void initState() {
_populationData = <AustraliaPopulationData>[
AustraliaPopulationData('New South Wales', 7.317),
AustraliaPopulationData('Queensland', 4.599),
AustraliaPopulationData('Northern Territory', 0.231),
AustraliaPopulationData('Victoria', 5.640),
AustraliaPopulationData('South Australia', 1.659),
AustraliaPopulationData('Western Australia', 2.366),
AustraliaPopulationData('Tasmania', 0.511),
AustraliaPopulationData('Australian Capital Territory', 0.366)
];
super.initState();
}
Step 2: Initialize the Treemap with the necessary properties. Please refer to this documentation for initializing the Treemap and populating the data source.
Step 3: Show the bar legend by setting the SfTreemap.Legend property as TreemapLegend(). Then, set the showPointerOnHover Boolean as true and the segementPaintingStyle as TreemapLegendpaintingStyle.gradient. Now, you can get a pointer on the bar legend by hovering over the tiles.
@override
Widget build(BuildContext context) {
return Scaffold(
body: SfTreemap(
dataCount: _populationData.length,
weightValueMapper: (int index) =>
_populationData[index].populationInMillions.toDouble(),
colorMappers: [
TreemapColorMapper.range(from: 0, to: 1, color: Colors.blue),
TreemapColorMapper.range(from: 1, to: 3, color: Colors.green),
TreemapColorMapper.range(from: 3, to: 5, color: Colors.yellow),
TreemapColorMapper.range(from: 5, to: 8, color: Colors.red),
],
legend: TreemapLegend.bar(
labelsPlacement: TreemapLegendLabelsPlacement.betweenItems,
segmentPaintingStyle: TreemapLegendPaintingStyle.gradient,
showPointerOnHover: true,
),
levels: [
TreemapLevel(
groupMapper: (int index) {
return _populationData[index].stateName;
},
colorValueMapper: (TreemapTile tile) {
return tile.weight;
},
labelBuilder: (BuildContext context, TreemapTile tile) {
return Padding(
padding: EdgeInsets.all(5),
child: Text(
tile.group,
overflow: TextOverflow.ellipsis,
),
);
},
)
],
),
);
}
class AustraliaPopulationData {
const AustraliaPopulationData(this.stateName, this.populationInMillions);
final String stateName;
final double populationInMillions;
}
Output
Check the following links for more features in Syncfusion® Flutter Treemap
Live samples
Blogs related to Treemap
Conclusion
I hope you enjoyed learning about how to have a pointer on the legend while hovering tiles in Flutter Treemap.
You can refer to our Flutter Treemap feature tour page to learn about its other groundbreaking feature representations. You can also explore our Flutter Treemap documentation to understand how to create and manipulate data.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion®, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
