breadcrumbs property
It is a navigation strategy that reveals the location of the current tile. Also provides an option to navigate back to previous levels by tapping or clicking on the previous breadcrumb items.
Breadcrumbs aligned horizontally across the top of the treemap.
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;
},
enableDrilldown: true,
breadcrumbs: TreemapBreadcrumbs(
builder:
(BuildContext context, TreemapTile tile, bool isCurrent) {
return Text(tile.group);
},
),
levels: [
TreemapLevel(
groupMapper: (int index) {
return _socialMediaUsersData[index].country;
},
labelBuilder: (BuildContext context, TreemapTile tile) {
return Text(tile.group);
},
),
TreemapLevel(
groupMapper: (int index) {
return _socialMediaUsersData[index].socialMedia;
},
labelBuilder: (BuildContext context, TreemapTile tile) {
return Text(tile.group);
},
),
],
),
);
}
See also:
- The TreemapBreadcrumbs.position position the breadcrumbs either top or bottom of the treemap.
- The TreemapBreadcrumbs.divider to add a separator between two breadcrumbs.
Implementation
final TreemapBreadcrumbs? breadcrumbs;