How to visualize hierarchical data in Flutter Treemap (SfTreemap) ?
In Syncfusion® Flutter Treemap, you can visualize data in a hierarchical structure by adding multiple TreemapLevel objects to the levels collection. The hierarchical tiles are arranged as nested rectangles, with each level's tiles returned from the groupMapper callback. After arranging the first level tiles, second level tiles with matching indices are placed inside their corresponding parent tiles. This pattern continues through all levels in the collection.
The following example demonstrates grouping country names in the first level and e-shopping companies in the second level:
late List<OnlineMarketDataModel> _onlineMarketSource;
@override
void initState() {
_onlineMarketSource = <OnlineMarketDataModel>[
OnlineMarketDataModel(
country: 'USA', sellerName: 'Amazon', visitorsInBillions: 5.7),
OnlineMarketDataModel(
country: 'Japan', sellerName: 'PayPay Mall', visitorsInBillions: 1.3),
OnlineMarketDataModel(
country: 'USA', sellerName: 'eBay', visitorsInBillions: 1.6),
OnlineMarketDataModel(
country: 'China', sellerName: 'AliExpress', visitorsInBillions: 0.6391),
OnlineMarketDataModel(
country: 'Japan', sellerName: 'Rakuten', visitorsInBillions: 0.6215),
OnlineMarketDataModel(
country: 'China', sellerName: 'Taobao', visitorsInBillions: 0.5452),
OnlineMarketDataModel(
country: 'USA', sellerName: 'Walmart', visitorsInBillions: 0.469),
OnlineMarketDataModel(
country: 'China', sellerName: 'JD', visitorsInBillions: 0.3182),
OnlineMarketDataModel(
country: 'USA', sellerName: 'Etsy', visitorsInBillions: 0.2663),
];
super.initState();
}
@override
void dispose() {
_onlineMarketSource.clear();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: SfTreemap(
dataCount: _onlineMarketSource.length,
weightValueMapper: (int index) {
return _onlineMarketSource[index].visitorsInBillions;
},
levels: [
//First level tiles to display country.
TreemapLevel(
color: Color.fromRGBO(213, 94, 94, 1),
groupMapper: (int index) => _onlineMarketSource[index].country,
labelBuilder: (BuildContext context, TreemapTile tile) {
return Padding(
padding: const EdgeInsets.only(left: 4.0, top: 4.0),
child: Text(tile.group),
);
},
),
// Inner level tiles to display product name.
TreemapLevel(
color: Color.fromRGBO(233, 133, 128, 1),
groupMapper: (int index) => _onlineMarketSource[index].sellerName,
labelBuilder: (BuildContext context, TreemapTile tile) {
return IgnorePointer(
child: Padding(
padding: const EdgeInsets.only(left: 4.0, top: 4.0),
child:
Text(tile.group, style: TextStyle(color: Colors.black)),
),
);
},
),
],
),
);
}
Output
Check the following links for more features in Syncfusion® Flutter Treemap:
Documentation
Package
Live samples
Related Blog Posts
