tooltipBuilder property
Returns a widget for the tooltip based on the treemap tile.
It displays additional information about the tiles on the treemap. The returned widget will then be wrapped in the existing tooltip shape which comes with the nose at the bottom.
It is possible to customize the border appearance using the TreemapTooltipSettings.borderColor and TreemapTooltipSettings.borderWidth. To customize the corners, use TreemapTooltipSettings.borderRadius.
late List<SocialMediaUsers> _socialMediaUsersData;
@override
void initState() {
_socialMediaUsersData = <SocialMediaUsers>[
SocialMediaUsers('India', 'Facebook', 280),
SocialMediaUsers('India', 'Instagram', 88),
SocialMediaUsers('USA', 'Facebook', 190),
SocialMediaUsers('USA', 'Instagram', 120),
SocialMediaUsers('Japan', 'Twitter', 48),
SocialMediaUsers('Japan', 'Instagram', 31),
];
super.initState();
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: SfTreemap(
dataCount: _socialMediaUsersData.length,
weightValueMapper: (int index) {
return _socialMediaUsersData[index].usersInMillions;
},
levels: [
TreemapLevel(
color: Colors.red,
border: const RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(15)),
side: BorderSide(color: Colors.black, width: 2),
),
padding: EdgeInsets.all(2),
groupMapper: (int index) {
return _socialMediaUsersData[index].country;
},
tooltipBuilder: (BuildContext context, TreemapTile tile) {
return Text('Country: ${tile.group}\n Users: ${tile.weight}');
},
),
],
),
);
}
class SocialMediaUsers {
const SocialMediaUsers(
this.country,
this.socialMedia,
this.usersInMillions,
);
final String country;
final String socialMedia;
final double usersInMillions;
}
See also:
- itemBuilder, displays the returned widget to the background of the tiles.
Implementation
final TreemapTileWidgetBuilder? tooltipBuilder;