Better D-pad navigation support for TV

[swift-kim]

On TV, a focus cannot move to specific widgets in an app through arrow buttons (D-pad) on remote controls if the app has one or more text field widgets.

For example, in the "share_plus" plugin demo, the "Share subject" text field and the "Share" button can never get a focus because the text field on the top ("Share text") swallows all arrow button clicks. (I cannot upload a screenshot due to the company firewall.)

This is a TV-specific issue because the only input device for TV is a remote control by default. Other profiles and platforms (such as Android) do not have this problem because they all support touch/pointer-based navigation.

Related links:

• https://stackoverflow.com/questions/69317431/flutter-d-pad-navigation
• Arrow (also D-PAD) keys don't work for focus traversal of TextFormField flutter/flutter#49335
• Keys (Tab, arrows) should not be handled by RenderEditable when also processed as an action. flutter/flutter#47156 (comment) and Synchronous keyboard events #221

cc @bbrto21

[swift-kim]

Another issue: A back key event is ignored when a text field has a focus. This issue applies to all profiles (including mobile/wearable).

[bbrto21]

Have you tested this on emulators(not tv) using the host's hardware keyboard ?
IMO, I think using a wrapper for d'pad should be considered first, like the answer on linked Stack Overflow question.

[swift-kim]

Have you tested this on emulators(not tv) using the host's hardware keyboard ?

Yes. D-pad keys are 1:1 mapped to arrow keys on hardware keyboard so there should be no difference.

[bbrto21]

This is a TV-specific issue because the only input device for TV is a remote control by default. Other profiles and platforms (such as Android) do not have this problem because they all support touch/pointer-based navigation.

Yes. D-pad keys are 1:1 mapped to arrow keys on hardware keyboard so there should be no difference.

Ok, I got you.

[swift-kim]

The back key issue will be fixed by #296.

[swift-kim]

Focus traversal can be easily customized by using FocusNode or FocusTraversalPolicy.

The following example uses FocusTraversalGroup with FocusTraversalPolicy to override arrowDown and arrowUp events when TextField widgets have a focus.

final FocusTraversalPolicy _policy = ReadingOrderTraversalPolicy();

KeyEventResult _handleKeyEvent(FocusNode node, KeyEvent event) {
  if (event is KeyUpEvent) {
    if (event.logicalKey == LogicalKeyboardKey.arrowDown) {
      _policy.next(node);
      return KeyEventResult.handled;
    } else if (event.logicalKey == LogicalKeyboardKey.arrowUp) {
      _policy.previous(node);
      return KeyEventResult.handled;
    }
  }
  return KeyEventResult.ignored;
}

@override
Widget build(BuildContext context) {
  return FocusTraversalGroup(
    policy: _policy,
    child: Focus(
      onKeyEvent: _handleKeyEvent,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          TextField(),
          TextField(),
        ],
      ),
    ),
  );
}

You can also simply use FocusNode if you want to explicitly move a focus to a specific widget (regardless of the widgets order).

final FocusNode _focusNode = FocusNode();

@override
void dispose() {
  _focusNode.dispose();
  super.dispose();
}

KeyEventResult _handleKeyEvent(FocusNode node, KeyEvent event) {
  if (event is KeyUpEvent) {
    if (event.logicalKey == LogicalKeyboardKey.arrowDown) {
      _focusNode.requestFocus();
      return KeyEventResult.handled;
    }
  }
  return KeyEventResult.ignored;
}

@override
Widget build(BuildContext context) {
  return Column(
    children: <Widget>[
      Focus(
        onKeyEvent: _handleKeyEvent,
        child: TextField(),
      ),
      TextField(focusNode: _focusNode), // this widget will get a focus
    ],
  );
}

For more information, you might read https://docs.flutter.dev/development/ui/advanced/focus.