How to apply colors based on the data in the Flutter Treemap?
This guide explains how to apply custom colors to tiles in a Syncfusion® Flutter Treemap based on your data values:
Step 1: Add the Syncfusion® Flutter Treemap package to your pubspec.yaml file and initialize your data source in the initState() method:.
late List<_CarSales> _carSalesData;
@override
void initState() {
_carSalesData = <_CarSales>[
const _CarSales(brand: 'Maruti', model: 'Ertiga+XL6', sales: 104190),
const _CarSales(brand: 'Maruti', model: 'Eeco', sales: 99480),
const _CarSales(brand: 'Toyota', model: 'Fortuner', sales: 9204),
const _CarSales(brand: 'Toyota', model: 'Glanza', sales: 20676),
const _CarSales(brand: 'Mahindra', model: 'Scorpio', sales: 31240),
const _CarSales(brand: 'Mahindra', model: 'XUV 500', sales: 7053),
const _CarSales(brand: 'Hyundai', model: 'Creta', sales: 96990),
const _CarSales(brand: 'Hyundai', model: 'i10 Grand', sales: 91930),
const _CarSales(brand: 'Tata Motors', model: 'Nexon', sales: 48842),
const _CarSales(brand: 'Tata Motors', model: 'Alitroz', sales: 47070),
];
super.initState();
}
Step 2: Initialize the Treemap with necessary properties. Please refer to this documentation for initializing the Treemap and populating the data source.
Step 3: Return the tile color in the TreemapLevel.colorValueMapper callback. This callback holds the current tile details like group, weight, indices, and level. By using these details, you can assign a color for the respective tiles.
@override
Widget build(BuildContext context) {
return Scaffold(
body: Padding(
padding: const EdgeInsets.all(5.0),
child: SfTreemap(
dataCount: _carSalesData.length,
weightValueMapper: (int index) {
return _carSalesData[index].sales;
},
levels: <TreemapLevel>[
TreemapLevel(
groupMapper: (int index) => _carSalesData[index].model,
// Update the color for the tile.
colorValueMapper: (TreemapTile tile) {
return _getTileColor(tile);
},
labelBuilder: (BuildContext context, TreemapTile tile) {
return Padding(
padding: const EdgeInsets.all(4.0),
child: Text(
_carSalesData[tile.indices[0]].brand + ' ' + tile.group,
overflow: TextOverflow.ellipsis),
);
},
),
],
),
),
);
}
Color _getTileColor(TreemapTile tile) {
final String brand = _carSalesData[tile.indices[0]].brand;
switch (brand) {
case 'Maruti':
return Color.fromRGBO(70, 130, 180, 0.9);
case 'Hyundai':
return Color.fromRGBO(244, 164, 96, 0.7);
case 'Mahindra':
return Color.fromRGBO(240, 128, 128, 0.7);
case 'Toyota':
return Color.fromRGBO(147, 112, 219, 0.7);
default:
return Color.fromRGBO(0, 128, 128, 0.7);
}
}
class _CarSales {
const _CarSales(
{required this.brand, required this.model, required this.sales});
final String brand;
final String model;
final double sales;
}
Output
Check the following links for more features in Syncfusion® Flutter Treemap:
Live samples
Blogs related to Treemap
Conclusion
I hope you enjoyed learning about how to apply colors based on the data in Flutter Treemap.
You can refer to our Flutter Treemap feature tour page to learn about its other groundbreaking feature representations. You can also explore our Flutter Treemap documentation to understand how to create and manipulate data.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion®, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
