Keyboard order on Flutter

By adjusting the keyboard order, you can provide a great experience for users that control their device using a hardware keyboard.

Keyboard order - Flutter

In Flutter, you can use FocusTraversalGroup to group widgets together. All subwidgets must be fully traversed before the keyboard focus is moved to the next widget. When grouping widgets into related groups is not enough, a FocusTraversalPolicy can be set to determine the ordering within the group.

The default ReadingOrderTraversalPolicy is usually sufficient, but in cases where more control over ordering is needed, an OrderedTraversalPolicy can be used. The order argument of the FocusTraversalOrder widget wrapped around the focusable components determines the order. The order can be any subclass of FocusOrder, but NumericFocusOrder and LexicalFocusOrder are provided.

Read more about Flutter's keyboard focus system.

warning

Full Keyboard Access (FKA) on iOS is not yet fully supported on Flutter.

• February 21, 2021: Flutter issue regarding FKA has been created

• October 24, 2024: Bare-bones FKA implementation has been merged

The example below shows how to use the FocusTraversalOrder widget to traverse a row of buttons in the order TWO, ONE, THREE using NumericFocusOrder.

Dart

Row(
    children: <Widget>[
        FocusTraversalOrder(
            order: NumericFocusOrder(2.0),
            child: TextButton(
                child: const Text('ONE'),
            ),
        ),
        const Spacer(),
        FocusTraversalOrder(
            order: NumericFocusOrder(1.0),
            child: TextButton(
                child: const Text('TWO'),
            ),
        ),
        const Spacer(),
        FocusTraversalOrder(
            order: NumericFocusOrder(3.0),
            child: TextButton(
                child: const Text('THREE'),
            ),
        ),
    ],
);

Bijdragen