SfTreemap constructor

const SfTreemap({ Key? key, required int dataCount, required List<TreemapLevel> levels, required IndexedDoubleValueMapper weightValueMapper, TreemapLayoutDirection layoutDirection = TreemapLayoutDirection.topLeft, List<TreemapColorMapper>? colorMappers, TreemapLegend? legend, ValueChanged<TreemapTile>? onSelectionChanged, Color? tileHoverColor = Colors.transparent, RoundedRectangleBorder? tileHoverBorder, TreemapSelectionSettings selectionSettings = const TreemapSelectionSettings(), TreemapTooltipSettings tooltipSettings = const TreemapTooltipSettings(), bool enableDrilldown = false, TreemapBreadcrumbs? breadcrumbs, })

Creates a treemap based on the squarified algorithm.

To populate the treemap with the data source, set the count of the data source to the SfTreemap.dataCount property of the treemap. The quantitative value of the underlying data has to be returned from the SfTreemap.weightValueMapper callback. Based on this value, every tile (rectangle) will have its size.

The data will be grouped based on the values returned from the TreemapLevel.groupMapper callback from the each TreemapLevel. Each unique value returned from the callback will have its own tile and its size will be based on the value returned in the SfTreemap.weightValueMapper for the same index. If the same values returned for the multiple indices in TreemapLevel.groupMapper callback, it will be grouped, and its size will be the sum of values returned from SfTreemap.weightValueMapper for those indices.

You can have more than one TreemapLevel in the SfTreemap.levels collection to form a hierarchal treemap. The 0th index of the SfTreemap.levels collection forms the base level of the treemap. From the 1st index, the values returned in the TreemapLevel.groupMapper callback will form as inner tiles of the tile formed in the previous level for which the indices match. This hierarchy will go on till the last TreemapLevel in the SfTreemap.levels collection.

late List<SocialMediaUsers> _socialMediaUsersData;
late List<TreemapColorMapper> _colorMappers;

@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),
  ];
  _colorMappers = <TreemapColorMapper>[
    TreemapColorMapper.range(0, 100, Colors.green),
    TreemapColorMapper.range(101, 200, Colors.blue),
    TreemapColorMapper.range(201, 300, Colors.red),
  ];
  super.initState();
}

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: SfTreemap(
      dataCount: _socialMediaUsersData.length,
      weightValueMapper: (int index) {
        return _socialMediaUsersData[index].usersInMillions;
      },
      colorMappers: _colorMappers,
      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;
            },
            colorValueMapper: (TreemapTile tile) => tile.weight,
            tooltipBuilder: (BuildContext context, TreemapTile tile) {
              return Text('Country: ${tile.group}\n Users: ${tile.weight}');
            },
            labelBuilder: (BuildContext context, TreemapTile tile) {
              return Text('Country : ${tile.group}');
            },
            itemBuilder: (BuildContext context, TreemapTile tile) {
              return Center(child: Icon(Icons.home, size: 15));
            }),
      ],
    ),
  );
}

class SocialMediaUsers {
  const SocialMediaUsers(
    this.country,
    this.socialMedia,
    this.usersInMillions,
  );
  final String country;
  final String socialMedia;
  final double usersInMillions;
}

See also:

• SfTreemap.slice, to render the tiles horizontally.
• SfTreemap.dice, to render the tiles vertically.

Implementation

const SfTreemap({
  Key? key,
  required this.dataCount,
  required this.levels,
  required this.weightValueMapper,
  this.layoutDirection = TreemapLayoutDirection.topLeft,
  this.colorMappers,
  this.legend,
  this.onSelectionChanged,
  this.tileHoverColor = Colors.transparent,
  this.tileHoverBorder,
  this.selectionSettings = const TreemapSelectionSettings(),
  this.tooltipSettings = const TreemapTooltipSettings(),
  this.enableDrilldown = false,
  this.breadcrumbs,
})  : assert(dataCount > 0),
      assert(levels.length > 0),
      assert(colorMappers == null || colorMappers.length > 0),
      assert(!enableDrilldown || (enableDrilldown && breadcrumbs != null)),
      sortAscending = false,
      _layoutType = LayoutType.squarified,
      super(key: key);