colorValueMapper property

TreemapTileColorValueMapper? colorValueMapper
final

Returns a color or value based on which tile color will be updated.

If this returns a color, then this color will be applied to the tile straightaway.

If it returns a value other than the color, then you must set the SfTreemap.colorMappers property.

The value returned from the colorValueMapper will be used for the comparison in the TreemapColorMapper.value or TreemapColorMapper.from and TreemapColorMapper.to. Then, the TreemapColorMapper.color will be applied to the respective tiles.

If it returns null, we have applied color based on the tile weight.

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(from: 0, to: 100, color: Colors.green),
      TreemapColorMapper.range(from: 101, to: 200, color: Colors.blue),
      TreemapColorMapper.range(from: 201, to: 300, color: 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(
              groupMapper: (int index) {
                return _socialMediaUsersData[index].country;
              },
              colorValueMapper: (TreemapTile tile) => tile.weight,
              ),
        ],
      ),
    );
  }

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

See also:

  • color, to set the color to the tiles.
  • border, to set the border to the tiles.

Implementation

final TreemapTileColorValueMapper? colorValueMapper;