tooltipSettings property
Customizes the appearance of the tooltip.
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;
},
tooltipSettings: TreemapTooltipSettings(
color: Colors.blue,
borderWidth: 2.0,
borderColor: Colors.white,
),
levels: [
TreemapLevel(
padding: EdgeInsets.all(2),
groupMapper: (int index) {
return _socialMediaUsersData[index].country;
},
color: Colors.red,
tooltipBuilder: (BuildContext context, TreemapTile tile) {
return Padding(
padding: EdgeInsets.all(10.0),
child: 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:
- TreemapLevel.tooltipBuilder, to enable the tooltip.
Implementation
final TreemapTooltipSettings tooltipSettings;