Category / Section
How to add and customize breadcrumb while drilldown in Flutter Treemap?
4 mins read
Breadcrumbs can be used to navigate between the Treemap's tile hierarchy. In Syncfusion® Flutter Treemap, you can add the breadcrumb at the top or bottom positions of Treemap.
Step 1: Initialize the Treemap with the required properties such as dataCount, weightValueMapper, and levels. The following code example will create a Treemap without breadcrumbs.
late List<CarDataModel> _source;
@override
void initState() {
_source = <CarDataModel>[
CarDataModel(carName: 'Hyundai', model: 'Elantra', totalScale: 198210),
CarDataModel(carName: 'Hyundai', model: 'Sonata', totalScale: 131803),
CarDataModel(carName: 'Hyundai', model: 'Tucson', totalScale: 114735),
CarDataModel(carName: 'Hyundai', model: 'Santa Fe', totalScale: 133171),
CarDataModel(carName: 'Hyundai', model: 'Accent', totalScale: 58955),
CarDataModel(carName: 'Hyundai', model: 'Veloster', totalScale: 12658),
CarDataModel(carName: 'Hyundai', model: 'loniq', totalScale: 11197),
CarDataModel(carName: 'Hyundai', model: 'Azera', totalScale: 3060),
CarDataModel(carName: 'Hyundai', model: 'Elantra', totalScale: 198210),
CarDataModel(carName: 'Benz', model: 'C-Class', totalScale: 77447),
CarDataModel(carName: 'Benz', model: 'GLE-Class', totalScale: 54595),
CarDataModel(carName: 'Benz', model: 'E/ CLS-CLass', totalScale: 51312),
CarDataModel(carName: 'Benz', model: 'GLC-Class', totalScale: 48643),
CarDataModel(carName: 'Benz', model: 'GLS-Class', totalScale: 322548),
CarDataModel(carName: 'Benz', model: 'Sprinter', totalScale: 27415),
CarDataModel(carName: 'Benz', model: 'CLA-Class', totalScale: 20669),
CarDataModel(carName: 'Benz', model: 'GLA-Class', totalScale: 24104),
CarDataModel(carName: 'Benz', model: 'S-Class', totalScale: 15888),
CarDataModel(carName: 'Benz', model: 'Metris', totalScale: 7579),
CarDataModel(carName: 'BMW', model: '3-Series', totalScale: 59449),
CarDataModel(carName: 'BMW', model: 'X5', totalScale: 50815),
CarDataModel(carName: 'BMW', model: 'X3', totalScale: 40691),
CarDataModel(carName: 'BMW', model: '5-Series', totalScale: 40658),
CarDataModel(carName: 'BMW', model: '4-Series', totalScale: 39634),
CarDataModel(carName: 'BMW', model: '2-Series', totalScale: 11737),
CarDataModel(carName: 'BMW', model: '7-Series', totalScale: 9276),
CarDataModel(carName: 'BMW', model: 'X1', totalScale: 30826),
CarDataModel(carName: 'BMW', model: 'X6', totalScale: 6780),
CarDataModel(carName: 'BMW', model: 'X4', totalScale: 5198),
CarDataModel(carName: 'BMW', model: '6-Series', totalScale: 3355),
CarDataModel(carName: 'Honda', model: 'Rogue', totalScale: 403465),
CarDataModel(carName: 'Honda', model: 'Sentra', totalScale: 218451),
CarDataModel(carName: 'Honda', model: 'Murano', totalScale: 76732),
CarDataModel(carName: 'Honda', model: 'Frontier', totalScale: 74360),
CarDataModel(carName: 'Honda', model: 'Altima', totalScale: 254996),
CarDataModel(carName: 'Honda', model: 'Versa', totalScale: 106772),
CarDataModel(carName: 'Honda', model: 'Maxima', totalScale: 67627),
CarDataModel(carName: 'Honda', model: 'Titan', totalScale: 52924),
CarDataModel(carName: 'Honda', model: 'Armada', totalScale: 35667),
CarDataModel(carName: 'Honda', model: 'NV', totalScale: 17858),
CarDataModel(carName: 'Honda', model: 'NV200', totalScale: 18602),
CarDataModel(carName: 'Honda', model: 'Duke', totalScale: 10157),
CarDataModel(carName: 'Ford', model: 'F-series', totalScale: 896764),
CarDataModel(carName: 'Ford', model: 'Explorer', totalScale: 271134),
CarDataModel(carName: 'Ford', model: 'Fusion', totalScale: 209623),
CarDataModel(carName: 'Ford', model: 'Focus', totalScale: 158385),
CarDataModel(carName: 'Ford', model: 'Edge', totalScale: 142603),
CarDataModel(carName: 'Ford', model: 'Transit', totalScale: 127340),
CarDataModel(carName: 'Ford', model: 'Mustang', totalScale: 81866),
CarDataModel(carName: 'Ford', model: 'Escape', totalScale: 308286),
CarDataModel(carName: 'Ford', model: 'E-series', totalScale: 53304),
CarDataModel(carName: 'Ford', model: 'Expedition', totalScale: 51833),
CarDataModel(carName: 'Ford', model: 'Fiesta', totalScale: 46249),
CarDataModel(carName: 'Ford', model: 'Taurus', totalScale: 41326),
CarDataModel(carName: 'Ford', model: 'Flex', totalScale: 22389),
CarDataModel(
carName: 'Ford', model: 'Transit connect', totalScale: 34473),
CarDataModel(carName: 'Ford', model: 'Transit', totalScale: 18390),
];
super.initState();
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: SfTreemap(
dataCount: _source.length,
weightValueMapper: (int index) {
return _source[index].totalScale;
},
levels: [
TreemapLevel(
groupMapper: (int index) => _source[index].carName,
labelBuilder: (BuildContext context, TreemapTile tile) {
return Padding(
padding: const EdgeInsets.only(left: 4.0, top: 4.0),
child: Text(
tile.group,
style: TextStyle(color: Colors.black),
overflow: TextOverflow.ellipsis,
),
);
},
),
TreemapLevel(
groupMapper: (int index) => _source[index].model,
labelBuilder: (BuildContext context, TreemapTile tile) {
return Padding(
padding: const EdgeInsets.only(left: 4.0, top: 4.0),
child: Text(
tile.group,
style: TextStyle(color: Colors.black),
overflow: TextOverflow.ellipsis,
),
);
},
),
],
),
);
}
class CarDataModel {
const CarDataModel({
required this.carName,
required this.model,
required this.totalScale,
});
final String carName;
final String model;
final double totalScale;
}
Step 2: Set the enableDrilldown property to perform drilled-in and drilled-out actions. You can add any widget as a breadcrumb item using the builder property.
Step 3: Use the divider and position properties to customize the breadcrumbs. The divider property is used to separate the breadcrumbs by adding any widget between them, and the position property is used to specify the breadcrumbs’ position. The following code example will create a Treemap with breadcrumb.
@override
Widget build(BuildContext context) {
return Scaffold(
body: SfTreemap(
dataCount: _source.length,
weightValueMapper: (int index) {
return _source[index].totalScale;
},
levels: [
TreemapLevel(
groupMapper: (int index) => _source[index].carName,
labelBuilder: (BuildContext context, TreemapTile tile) {
return Padding(
padding: const EdgeInsets.only(left: 4.0, top: 4.0),
child: Text(
tile.group,
style: TextStyle(color: Colors.black),
overflow: TextOverflow.ellipsis,
),
);
},
),
TreemapLevel(
groupMapper: (int index) => _source[index].model,
labelBuilder: (BuildContext context, TreemapTile tile) {
return Padding(
padding: const EdgeInsets.only(left: 4.0, top: 4.0),
child: Text(
tile.group,
style: TextStyle(color: Colors.black),
overflow: TextOverflow.ellipsis,
),
);
},
),
],
// Enable the drill down property
enableDrilldown: true,
breadcrumbs: TreemapBreadcrumbs(
builder: (BuildContext context, TreemapTile tile, bool isCurrent) {
// Return the widget for each breadcrumb item
if (tile.group == 'Home') {
return Icon(Icons.home, color: Colors.black);
} else {
return Text(tile.group,
style: TextStyle(
color: isCurrent ? Colors.blue : Colors.black));
}
},
divider: Icon(Icons.chevron_right, color: Colors.black),
position: TreemapBreadcrumbPosition.top,
),
),
);
}
class CarDataModel {
const CarDataModel({
required this.carName,
required this.model,
required this.totalScale,
});
final String carName;
final String model;
final double totalScale;
}
Output
Check the following links for more features in Syncfusion® Flutter Treemap:
- Syncfusion® Flutter Treemap product page
- User guide documentation for Syncfusion® Flutter Treemap
- pub.dev
Live samples
Blogs related to Treemap
