SfTreemap class Null safety

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:

Inheritance

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 = const RoundedRectangleBorder(side: BorderSide(width: 1, color: Color.fromRGBO(0, 0, 0, 0.5))), 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 = const RoundedRectangleBorder(side: BorderSide(width: 1, color: Color.fromRGBO(0, 0, 0, 0.5))), 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 = const RoundedRectangleBorder(side: BorderSide(width: 1, color: Color.fromRGBO(0, 0, 0, 0.5))), bool enableDrilldown = false, TreemapBreadcrumbs? breadcrumbs})
Creates a treemap based on the slice algorithm. [...]
const

Properties

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. [...]
@nonVirtual, read-only, 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.
read-only, 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. [...]
@protected, inherited
debugFillProperties(DiagnosticPropertiesBuilder properties) → void
Add additional properties associated with the node. [...]
override
noSuchMethod(Invocation invocation) → dynamic
Invoked when a non-existent 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. [...]
@nonVirtual, inherited