TreemapLegend constructor

const TreemapLegend(
  1. {bool shouldAlwaysShowScrollbar = false,
  2. Widget? title,
  3. TreemapLegendPosition position =,
  4. Offset? offset,
  5. TreemapLegendOverflowMode overflowMode = TreemapLegendOverflowMode.wrap,
  6. Axis? direction,
  7. EdgeInsetsGeometry? padding = const EdgeInsets.all(10.0),
  8. double spacing = 10.0,
  9. TextStyle? textStyle,
  10. TreemapIconType iconType =,
  11. Size iconSize = const Size(8.0, 8.0)}

Provides additional information about the data rendered in the tree map by initializing the SfTreemap.legend property.

Defaults to null.

By default, legend will not be shown.

If SfTreemap.colorMappers is null, then the legend item's icon color and legend item's text applied based on the value of TreemapLevel.color and the TreemapLevel.groupMapper properties of first TreemapLevel added in the SfTreemap.levels collection respectively.

If SfTreemap.colorMappers is not null and using TreemapColorMapper.value() constructor, the legend item's icon color applied based on the TreemapColorMapper.color property and the legend text applied based on the TreemapColorMapper.value property.

When using TreemapColorMapper.range constructor, the legend item's icon color applied based on the TreemapColorMapper.color property and the legend text applied based on the property. If the property is null, then the text applied based on the TreemapColorMapper.from and properties.

The below code snippet represents how to create default legend to the tree map.

late List<SocialMediaUsers> _source;

void initState() {
  _source = <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: _source.length,
      weightValueMapper: (int index) {
        return _source[index].usersInMillions;
      levels: [
          groupMapper: (int index) {
            return _source[index].country;
      legend: TreemapLegend(),

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

See also:


const TreemapLegend({
  this.shouldAlwaysShowScrollbar = false,
  this.position =,
  this.overflowMode = TreemapLegendOverflowMode.wrap,
  this.padding = const EdgeInsets.all(10.0),
  this.spacing = 10.0,
  this.iconType =,
  this.iconSize = const Size(8.0, 8.0),
})  : _type = _LegendType.vector,
      segmentSize = null,
      labelsPlacement = null,
      edgeLabelsPlacement = TreemapLegendEdgeLabelsPlacement.inside,
      labelOverflow = TreemapLabelOverflow.visible,
      segmentPaintingStyle = TreemapLegendPaintingStyle.solid,
      showPointerOnHover = false,
      pointerBuilder = null,
      pointerColor = null,
      pointerSize = const Size(16, 12),
      assert(spacing >= 0);