Item Builder in Flutter Treemap (SfTreemap)

22 Jun 20214 minutes to read

You can add any type of custom widgets such as image widget as a background of the tiles to easily visualize the type of data that a particular tile shows.

Add images

You can add images as a background of the tiles using the TreemapLevel.itemBuilder callback.

late List<SocialMediaUsers> _source;

@override
void initState() {
   _source = <SocialMediaUsers>[
      SocialMediaUsers('India', 'Facebook', 25.4),
      SocialMediaUsers('USA', 'Instagram', 19.11),
      SocialMediaUsers('Japan', 'Facebook', 13.3),
      SocialMediaUsers('Germany', 'Instagram', 10.65),
      SocialMediaUsers('France', 'Twitter', 7.54),
      SocialMediaUsers('UK', 'Instagram', 4.93),
   ];
   super.initState();
}

@override
Widget build(BuildContext context) {
  return Scaffold(
     body: Center(
        child: Container(
          height: 400,
          width: 400,
          child: SfTreemap(
            dataCount: _source.length,
            weightValueMapper: (int index) {
              return _source[index].usersInMillions;
            },
            levels: [
              TreemapLevel(
                groupMapper: (int index) {
                  return _source[index].country;
                },
                itemBuilder: (BuildContext context, TreemapTile tile) {
                  return Align(
                    alignment: Alignment.center,
                    child: Image.asset(
                      _getImageSource(tile)!,
                    ),
                  );
                },
              ),
            ],
          ),
        ),
      ),
   );
}

String? _getImageSource(TreemapTile tile) {
   if (_source[tile.indices[0]].socialMedia == 'Facebook') {
     return 'images/facebook.png';
   } else if (_source[tile.indices[0]].socialMedia == 'Instagram') {
     return 'images/instagram.png';
   } else if (_source[tile.indices[0]].socialMedia == 'Twitter') {
     return 'images/twitter.png';
   }
   return null;
}

class SocialMediaUsers {
  const SocialMediaUsers(this.country, this.socialMedia, this.usersInMillions);

  final String country;
  final String socialMedia;
  final double usersInMillions;
}

item builder support

NOTE