3.6 KiB
| layout | title | description | platform | control | documentation |
|---|---|---|---|---|---|
| post | Accessibility in Flutter treemap widget | Syncfusion | Learn here all about the accessibility support in Syncfusion Flutter treemap (SfTreemap) widget and how to customize it. | Flutter | SfTreemap | ug |
Accessibility in Flutter Treemap (SfTreemap)
Screen reader
The SfTreemap can be accessed by the screen readers by wrapping the SfTreemap widget to the Semantics widget.
{% tabs %} {% highlight Dart %}
late List _source; late String _semanticLabel = 'Asia is the most populated continent and Australia is the least populated continent';
@override void initState() { _source = const [ PopulationModel('Asia', 456.07), PopulationModel('Africa', 121.61), PopulationModel('Europe', 74.64), PopulationModel('North America', 57.9), PopulationModel('South America', 42.25), PopulationModel('Australia', 2.54), ]; super.initState(); }
@override void dispose() { _source.clear(); super.dispose(); }
@override Widget build(BuildContext context) { return Scaffold( body: Semantics( label: 'Syncfusion Flutter Treemap', value: _semanticLabel, child: Column( children: [ Expanded( child: SfTreemap( dataCount: _source.length, weightValueMapper: (int index) { return _source[index].populationInCrores; }, levels: [ TreemapLevel( groupMapper: (int index) { return _source[index].continent; }, ), ], ), ), ], ), ), ); }
class PopulationModel { const PopulationModel(this.continent, this.populationInCrores);
final String continent; final double populationInCrores; }
{% endhighlight %} {% endtabs %}
Sufficient contrast
You can customize the color of the SfTreemap elements using the following APIs for the sufficient contrast.
Large fonts
The font size of the SfTreemap will be automatically scaled based on the device settings. Also, you can change the font size of the SfTreemap elements using the following APIs:
Easier touch targets
The SfTreemap has touch target as 48 * 48 as per the standard for all the elements.