How to add background images in Flutter Treemap?
This guide explains how to add background images to tiles in a Syncfusion® Flutter Treemap.
Step 1: First, create a data model and initialize your data source in the initState() method:
late List<SocialMediaUsers> _socialMediaUsersData;
@override
void initState() {
_socialMediaUsersData = <SocialMediaUsers>[
SocialMediaUsers('Facebook', 2.8, 'images/facebook.png'),
SocialMediaUsers('Instagram', 1, 'images/instagram.png'),
SocialMediaUsers('WhatsApp', 2, 'images/whatsapp.png'),
SocialMediaUsers('YouTube', 2, 'images/youtube.png'),
SocialMediaUsers('Messenger', 1.3, 'images/messenger.png'),
SocialMediaUsers('WeChat', 1.2, 'images/wechat.png'),
];
super.initState();
}
Step 2: Set the value for dataCount property and also return a value for the weightValueMapper callback based on the given data source. Add a TreemapLevel to the list of the levels in SfTreemap. In the TreemapLevel.groupMapper callback, return the value to be grouped.
To know, how treemap works, refer this link.
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Syncfusion Flutter Treemap'),
centerTitle: true,
),
body: Column(
children: [
Padding(
padding: const EdgeInsets.all(8.0),
child: Text('Top 6 Social Media Users in World'),
),
Expanded(
child: SfTreemap(
dataCount: _socialMediaUsersData.length,
weightValueMapper: (int index) {
return _socialMediaUsersData[index].usersInBillions;
},
levels: [
TreemapLevel(
groupMapper: (int index) {
return _socialMediaUsersData[index].socialMedia;
},
color: Colors.indigo.withOpacity(0.5),
),
],
),
),
],
),
);
}
class SocialMediaUsers {
const SocialMediaUsers(
this.socialMedia, this.usersInBillions, this.imagePath);
final String socialMedia;
final double usersInBillions;
final String imagePath;
}
Step 3: By using the SfTreemap.itemBuilder callback, you can return any type of widget which is to be shown in background of the tiles. In this example, we will return the image widget.
itemBuilder: (BuildContext context, TreemapTile tile) {
final int tilesIndicesLength = tile.indices.length;
late SocialMediaUsers media;
for (int i = 0; i < _socialMediaUsersData.length; i++) {
if (_socialMediaUsersData[tile.indices[tilesIndicesLength - 1]]
.socialMedia ==
_socialMediaUsersData[i].socialMedia) {
media = _socialMediaUsersData[i];
break;
}
}
return Column(
children: [
Padding(
padding: const EdgeInsets.all(4.0),
child: Text(media.socialMedia +
' - ' +
media.usersInBillions.toString() +
'B Users'),
),
Expanded(
child: Image.asset(media.imagePath),
),
],
);
}
}
Thus, using the Syncfusion® Flutter Treemap, we have added the background image to the tiles.
Output
Check the following links for more features in Syncfusion® Flutter Treemap:
Documentation
Package
Live samples
Related Blog Posts
