Ga naar hoofdinhoud
Logo Appt Light

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.

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.

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

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

Feedback?

Laat 't ons weten!