Accessibility in Flutter DataGrid (SfDataGrid)

26 Jun 20238 minutes to read

Screen reader support

The SfDataGrid can be accessed easily by the screen readers in the following ways on Android and iOS platforms:

  • Cell contents can be read by tapping the required cell.
  • Read the adjacent cell’s content by swiping right or left.
  • Scroll the Datagrid vertically and horizontally by dragging two fingers.

Sufficient contrast

The SfDataGrid provides sufficient color contrast to make the cell content easier. Use the following properties to customize the appearance of the datagrid elements.

Large fonts

As SfDataGrid gets the widget from the user end for each cell, the font size in that widget will be automatically changed based on OS settings in Android and iOS platforms. To view the cell content clearly, the row heights in the Datagrid will be automatically adjusted based on the MediaQueryData.textScaleFactor.

import 'package:syncfusion_flutter_datagrid/datagrid.dart';

@override
Widget build(BuildContext context) {
  return MediaQuery(
      data: MediaQueryData(textScaleFactor: 1.5),
      child: SfDataGrid(source: _employeeDataSource, columns: <GridColumn>[
        GridColumn(
            columnName: 'id',
            label: Container(
                padding: EdgeInsets.symmetric(horizontal: 16.0),
                alignment: Alignment.centerRight,
                child: Text(
                  'ID',
                  overflow: TextOverflow.ellipsis,
                ))),
        GridColumn(
            columnName: 'name',
            label: Container(
                padding: EdgeInsets.symmetric(horizontal: 16.0),
                alignment: Alignment.centerLeft,
                child: Text(
                  'Name',
                  overflow: TextOverflow.ellipsis,
                ))),
        GridColumn(
            columnName: 'salary',
            label: Container(
                padding: EdgeInsets.symmetric(horizontal: 16.0),
                alignment: Alignment.centerRight,
                child: Text(
                  'Salary',
                  overflow: TextOverflow.ellipsis,
                ))),
        GridColumn(
            columnName: 'designation',
            label: Container(
                padding: EdgeInsets.symmetric(horizontal: 16.0),
                alignment: Alignment.centerLeft,
                child: Text(
                  'Designation',
                  overflow: TextOverflow.ellipsis,
                )))
      ]));
}

Keyboard navigation

The SfDataGrid provides keyboard navigation support when the selectionMode and navigationMode are enabled. Refer to this link for supported keys and their purpose.

Visual density

The row heights in SfDataGrid will be automatically adjusted based on the visualDensity.

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_datagrid/datagrid.dart';

@override
Widget build(BuildContext context) {
  return Theme(
      data: ThemeData(visualDensity: VisualDensity.compact),
      child: SfDataGrid(source: _employeeDataSource, columns: <GridColumn>[
        GridColumn(
            columnName: 'id',
            label: Container(
                padding: EdgeInsets.symmetric(horizontal: 16.0),
                alignment: Alignment.centerRight,
                child: Text(
                  'ID',
                  overflow: TextOverflow.ellipsis,
                ))),
        GridColumn(
            columnName: 'name',
            label: Container(
                padding: EdgeInsets.symmetric(horizontal: 16.0),
                alignment: Alignment.centerLeft,
                child: Text(
                  'Name',
                  overflow: TextOverflow.ellipsis,
                ))),
        GridColumn(
            columnName: 'salary',
            label: Container(
                padding: EdgeInsets.symmetric(horizontal: 16.0),
                alignment: Alignment.centerRight,
                child: Text(
                  'Salary',
                  overflow: TextOverflow.ellipsis,
                ))),
        GridColumn(
            columnName: 'designation',
            label: Container(
                padding: EdgeInsets.symmetric(horizontal: 16.0),
                alignment: Alignment.centerLeft,
                child: Text(
                  'Designation',
                  overflow: TextOverflow.ellipsis,
                )))
      ]));
}