Accessibility in Flutter Treemap (SfTreemap)

6 Aug 20263 minutes to read

Screen reader

The SfTreemap can be accessed by screen readers by wrapping the SfTreemap widget with the Semantics widget.

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_treemap/treemap.dart';

class TreemapAccessibilityExample extends StatefulWidget {
  const TreemapAccessibilityExample({super.key});

  @override
  State<TreemapAccessibilityExample> createState() =>
      _TreemapAccessibilityExampleState();
}

class _TreemapAccessibilityExampleState
    extends State<TreemapAccessibilityExample> {
  late List<PopulationModel> _source;
  final String _semanticLabel =
      'Asia is the most populated continent and Australia is the least populated continent';

  @override
  void initState() {
    _source = <PopulationModel>[
      const PopulationModel('Asia', 456.07),
      const PopulationModel('Africa', 121.61),
      const PopulationModel('Europe', 74.64),
      const PopulationModel('North America', 57.9),
      const PopulationModel('South America', 42.25),
      const PopulationModel('Australia', 2.54),
    ];
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Semantics(
        label: 'Syncfusion Flutter Treemap',
        value: _semanticLabel,
        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;
}

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. Additionally, you can change the font size of the SfTreemap elements using the following APIs:

Easier touch targets

The SfTreemap has touch targets of 48 × 48 pixels for all elements, following standard accessibility guidelines.