colorMappers property

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

The TreemapLevel.colorValueMapper which will be called for each tiles in the respective level, needs to return a color or value based on which tiles color will be updated.

If it returns a color, then this color will be applied to the tiles straightaway. If it returns a value other than the color, then this value will be compared with the TreemapColorMapper.value for the exact value or TreemapColorMapper.from and TreemapColorMapper.to for the range of values. Then the respective TreemapColorMapper.color will be applied to that tile.

The below code snippet represents how color can be applied to the shape based on the TreemapColorMapper.value property of TreemapColorMapper.

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.value(value: 'India', color: Colors.green),
      TreemapColorMapper.value(value: 'USA', color: Colors.blue),
      TreemapColorMapper.value(value: 'Japan', 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.group,
          ),
        ],
      ),
    );
  }

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

The below code snippet represents how color can be applied to the shape based on the range between TreemapColorMapper.from and TreemapColorMapper.toproperties of TreemapColorMapper.

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;
}

Implementation

SfTreemap class