Loading...
Loading...
Implements Syncfusion Flutter TreeMap (SfTreemap) for visualizing hierarchical and proportional data in Flutter apps. Use when working with treemap layouts, nested rectangles, drill-down navigation, or hierarchical data visualization. This skill covers layouts, labels, tooltips, legends, selection, color mapping, and drilldown navigation.
npx skill4agent add syncfusion/flutter-ui-components-skills syncfusion-flutter-treemapdataCountweightValueMapperlevelsgroupMapperweightValueMapperdataCountlabelBuildertooltipBuilderonSelectionChangedonTapitemBuilderimport 'package:flutter/material.dart';
import 'package:syncfusion_flutter_treemap/treemap.dart';
class BasicTreemapExample extends StatefulWidget {
_BasicTreemapExampleState createState() => _BasicTreemapExampleState();
}
class _BasicTreemapExampleState extends State<BasicTreemapExample> {
late List<SalesData> _salesData;
void initState() {
_salesData = [
SalesData(region: 'North America', sales: 8500),
SalesData(region: 'Europe', sales: 6200),
SalesData(region: 'Asia', sales: 9800),
SalesData(region: 'South America', sales: 3400),
SalesData(region: 'Africa', sales: 2100),
];
super.initState();
}
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Sales by Region')),
body: Center(
child: Container(
height: 400,
width: 400,
padding: EdgeInsets.all(16),
child: SfTreemap(
dataCount: _salesData.length,
weightValueMapper: (int index) {
return _salesData[index].sales;
},
levels: [
TreemapLevel(
groupMapper: (int index) {
return _salesData[index].region;
},
labelBuilder: (BuildContext context, TreemapTile tile) {
return Padding(
padding: EdgeInsets.all(4),
child: Text(
tile.group,
style: TextStyle(color: Colors.black),
),
);
},
),
],
),
),
),
);
}
}
class SalesData {
SalesData({required this.region, required this.sales});
final String region;
final double sales;
}// Multi-level data structure
class SalesData {
SalesData({
required this.region,
required this.country,
required this.sales,
});
final String region;
final String country;
final double sales;
}
// TreeMap with two levels
SfTreemap(
dataCount: _salesData.length,
weightValueMapper: (int index) => _salesData[index].sales,
levels: [
TreemapLevel(
groupMapper: (int index) => _salesData[index].region,
),
TreemapLevel(
groupMapper: (int index) => _salesData[index].country,
),
],
)SfTreemap(
dataCount: _data.length,
weightValueMapper: (int index) => _data[index].value,
colorMappers: [
TreemapColorMapper.range(
from: 0,
to: 25,
color: Colors.green,
name: 'Low',
),
TreemapColorMapper.range(
from: 25,
to: 50,
color: Colors.yellow,
name: 'Medium',
),
TreemapColorMapper.range(
from: 50,
to: 100,
color: Colors.red,
name: 'High',
),
],
legend: TreemapLegend.bar(),
levels: [
TreemapLevel(
groupMapper: (int index) => _data[index].category,
),
],
)SfTreemap(
dataCount: _data.length,
weightValueMapper: (int index) => _data[index].value,
onSelectionChanged: (TreemapTile tile) {
setState(() {
// Add selection changed functionalities here
});
},
levels: [
TreemapLevel(
groupMapper: (int index) => _data[index].category,
color: Colors.blue[200],
tooltipBuilder: (BuildContext context, TreemapTile tile) {
return Container(
padding: EdgeInsets.all(8),
decoration: BoxDecoration(
color: Colors.black87,
borderRadius: BorderRadius.circular(4),
),
child: Text(
'${tile.group}: ${tile.weight}',
style: TextStyle(color: Colors.white),
),
);
},
),
],
)| Property | Type | Description |
|---|---|---|
| int | Number of data points in the source |
| IndexedDoubleValueMapper | Callback returning numeric value for tile size |
| List<TreemapLevel> | Hierarchy levels configuration |
| Property | Type | Description |
|---|---|---|
| IndexedStringValueMapper | Groups data for this level |
| TreemapLabelBuilder? | Custom label widget builder |
| TreemapTooltipBuilder? | Custom tooltip widget builder |
| Color? | Default tile color for this level |
| RoundedRectangleBorder? | Tile border styling |
| EdgeInsetsGeometry? | Padding around tiles |
Note: The layout algorithm is determined by the constructor used, not by a property. Usefor squarified (default),SfTreemap()for slice, orSfTreemap.slice()for dice.SfTreemap.dice()
| Property | Type | Description |
|---|---|---|
| List<TreemapColorMapper>? | Value/range-based coloring |
| TreemapLegend? | Legend widget configuration |
| ValueChanged<TreemapTile>? | Selection event handler |
| TreemapLayoutDirection | Layouts the tiles in top-left, top-right, bottom-left and bottom-right directions; default |
| bool | Sort tiles by weight (slice/dice only) |
dataCountweightValueMappergroupMapperlabelBuildercolorMappersonSelectionChangedsetState