SfTreemap class

A data visualization widget that provides an effective way to visualize flat and hierarchical data as rectangles that are sized and colored based on quantitative variables.

Labels - Add any type of widgets (like text widget) to improve the readability of the individual tiles by providing brief descriptions.

Layouts - Use different layouts based on the algorithms such as squarified, slice, and dice to represent flat and hierarchically structured data.

Hierarchical support - Along with the flat level, treemap supports hierarchical structure too. Each tile of the treemap is a rectangle which is filled with smaller rectangles representing sub-data.

Colors - Categorize the tiles on the treemap by customizing their color based on the levels. It is possible to set the tile color for a specific value or for a range of values.

Tooltip - Display additional information about the tile using a completely customizable tooltip on the treemap.

Legend - Use different legend styles to provide information on the treemap data clearly.

Selection - Allows you to select the tiles to highlight it and do any specific functionalities like showing pop-up or navigate to a different page.

Custom background widgets - Add any type of custom widgets such as image widget as a background of the tiles to enrich the UI and easily visualize the type of data that a particular tile shows.

To populate the treemap with the data source, set the count of the data source to the dataCount property of the treemap. The quantitative value of the underlying data has to be returned from the 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 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 weightValueMapper for those indices.

You can have more than one TreemapLevel in the levels collection to form a hierarchal treemap. The 0th index of the 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 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.
• TreemapLevel.tooltipBuilder, to enable tooltip.
• SfTreemap.legend, to enable legend.
• TreemapLevel.labelBuilder, to add a label for each tile.

Inheritance

• Object
• DiagnosticableTree
• Widget
• StatelessWidget
• SfTreemap

Constructors

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.

const

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

Creates a treemap based on the dice algorithm.

const

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

Creates a treemap based on the slice algorithm.

const

Properties

breadcrumbs → TreemapBreadcrumbs?

It is a navigation strategy that reveals the location of the current tile. Also provides an option to navigate back to previous levels by tapping or clicking on the previous breadcrumb items.

final

colorMappers → List<TreemapColorMapper>?

Collection of TreemapColorMapper which specifies tile’s color based on the data.

final

dataCount → int

Specifies the length of the data source.

final

enableDrilldown → bool

Specifies whether this treemap is complex enough (having larger data) to enable drilldown.

final

hashCode → int

The hash code for this object.

no setter, inherited

key → Key?

Controls how one widget replaces another widget in the tree.

final, inherited

layoutDirection → TreemapLayoutDirection

Represents the layout direction of the tiles.

final

legend → TreemapLegend?

Shows legend for the data rendered in the treemap.

final

levels → List<TreemapLevel>

The levels collection which forms either flat or hierarchal treemap.

final

onSelectionChanged → ValueChanged<TreemapTile>?

Called when the user selected the tile.

final

runtimeType → Type

A representation of the runtime type of the object.

no setter, inherited

selectionSettings → TreemapSelectionSettings

Customized the appearance of the tiles in selection state.

final

sortAscending → bool

Sort the tiles based on the value returned from the weightValueMapper callback.

final

tileHoverBorder → RoundedRectangleBorder?

Customizes the appearance of the hovered tile’s border.

final

tileHoverColor → Color?

Customizes the appearance of the hovered tile’s fill color.

final

tooltipSettings → TreemapTooltipSettings

Customizes the appearance of the tooltip.

final

weightValueMapper → IndexedDoubleValueMapper

Returns the values which determines the weight of each tile.

final

Methods

build(BuildContext context) → Widget

Describes the part of the user interface represented by this widget.

override

createElement() → StatelessElement

Creates a StatelessElement to manage this widget's location in the tree.

inherited

debugDescribeChildren() → List<DiagnosticsNode>

Returns a list of DiagnosticsNode objects describing this node's children.

inherited

debugFillProperties(DiagnosticPropertiesBuilder properties) → void

Add additional properties associated with the node.

override

noSuchMethod(Invocation invocation) → dynamic

Invoked when a nonexistent method or property is accessed.

inherited

toDiagnosticsNode({String? name, DiagnosticsTreeStyle? style}) → DiagnosticsNode

Returns a debug representation of the object that is used by debugging tools and by DiagnosticsNode.toStringDeep.

inherited

toString({DiagnosticLevel minLevel = DiagnosticLevel.info}) → String

A string representation of this object.

inherited

toStringDeep({String prefixLineOne = '', String? prefixOtherLines, DiagnosticLevel minLevel = DiagnosticLevel.debug}) → String

Returns a string representation of this node and its descendants.

inherited

toStringShallow({String joiner = ', ', DiagnosticLevel minLevel = DiagnosticLevel.debug}) → String

Returns a one-line detailed description of the object.

inherited

toStringShort() → String

A short, textual description of this widget.

inherited

Operators

operator ==(Object other) → bool

The equality operator.

inherited