DataTable: expose focus-related attributes

[jpnurmi]

Use case

The use case is to control tab focus traversal on the desktop. For example, the following kind of table might want to have 3 tab-focus traversal steps per row:

• the row as a whole
• the edit button
• the delete button

DataTable creates hidden ink wells/responses under the hood. For these, none of the focus-related attributes are exposed. As a result, the focus chain for the above table becomes "Foo 2" -> "Bar 2" -> "(Baz)" -> "Edit" -> "Delete" where it's hard for the user to understand where the focus is traversing because there are "hidden" steps under the hood.

sample code

import 'package:flutter/material.dart';

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  FocusManager.instance.addListener(() => print(primaryFocus));

  runApp(
    MaterialApp(
      home: Scaffold(
        body: DataTable(
          showCheckboxColumn: false,
          columns: const [
            DataColumn(label: Text('Foo')),
            DataColumn(label: Text('Bar')),
            DataColumn(label: Text('Baz')),
          ],
          rows: [
            for (var i = 1; i <= 5; ++i)
              DataRow.byIndex(
                index: i,
                cells: [
                  DataCell(Text('Foo $i')),
                  DataCell(Text('Bar $i')),
                  DataCell(Row(
                    mainAxisSize: MainAxisSize.min,
                    children: [
                      IconButton(
                        icon: const Icon(Icons.edit),
                        focusNode: FocusNode(debugLabel: 'edit'),
                        onPressed: () {},
                      ),
                      IconButton(
                        icon: const Icon(Icons.delete),
                        focusNode: FocusNode(debugLabel: 'delete'),
                        onPressed: () {},
                      ),
                    ],
                  ))
                ],
                onSelectChanged: (value) => print('Selected $i $value'),
              ),
          ],
        ),
      ),
    ),
  );
}

Proposal

Expose autofocus, focusNode, and perhaps canRequestFocus for both DataRow and DataCell.

[GP4cK]

I have a similar use case when a DataTable has TextFields and the rows can be selected via the checkbox: in that case, the user needs to press tab twice to go to the next field because between every field, the row gets the focus.

The issue was already raised here: #74022 and the fix works well only if the table doesn't have checkboxes.

[flutter-triage-bot]

The triaged-desktop label is irrelevant if there is no team-desktop label or fyi-desktop label.