TreemapLevel constructor

const TreemapLevel({
  1. Color? color,
  2. RoundedRectangleBorder? border,
  3. EdgeInsetsGeometry? padding = const EdgeInsets.all(0.5),
  4. required IndexedStringValueMapper groupMapper,
  5. TreemapTileColorValueMapper? colorValueMapper,
  6. TreemapTileWidgetBuilder? tooltipBuilder,
  7. TreemapTileWidgetBuilder? labelBuilder,
  8. TreemapTileWidgetBuilder? itemBuilder,
})

Creates a TreemapLevel.

The levels collection which forms either flat or hierarchal treemap.

You can have more than one TreemapLevel in this collection to form a hierarchal treemap. The 0th index of the Treemap.levels collection forms the base level of the treemap or flat 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 Treemap.levels collection.

late List<SocialMediaUsers> _socialMediaUsersData;

  @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),
    ];
    super.initState();
  }

@override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SfTreemap(
        dataCount: _socialMediaUsersData.length,
        weightValueMapper: (int index) {
          return _socialMediaUsersData[index].usersInMillions;
        },
      levels: [
        TreemapLevel(
            color: Colors.red,
            padding: EdgeInsets.all(2),
            groupMapper: (int index) {
              return _socialMediaUsersData[index].country;
            }),
        ],
      ),
    );
  }

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

See also:

  • SfTreemap, to know how treemap render the tiles.

Implementation

const TreemapLevel({
  this.color,
  this.border,
  this.padding = const EdgeInsets.all(0.5),
  required this.groupMapper,
  this.colorValueMapper,
  this.tooltipBuilder,
  this.labelBuilder,
  this.itemBuilder,
});