tooltipBuilder property

TreemapTileWidgetBuilder? tooltipBuilder

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;

  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),

  Widget build(BuildContext context) {
    return Scaffold(
      body: SfTreemap(
        dataCount: _socialMediaUsersData.length,
        weightValueMapper: (int index) {
          return _socialMediaUsersData[index].usersInMillions;
        levels: [
              border: const RoundedRectangleBorder(
                borderRadius: BorderRadius.all(Radius.circular(15)),
                side: BorderSide(color:, width: 2),
              padding: EdgeInsets.all(2),
              groupMapper: (int index) {
                return _socialMediaUsersData[index].country;
              tooltipBuilder: (BuildContext context, TreemapTile tile) {
                return Text('Country: ${}\n Users: ${tile.weight}');

class SocialMediaUsers {
  const SocialMediaUsers(,
  final String country;
  final String socialMedia;
  final double usersInMillions;

See also:

  • itemBuilder, displays the returned widget to the background of the tiles.


final TreemapTileWidgetBuilder? tooltipBuilder;