Scrolling with animation to the next focusable node

Use case

When building for TV apps, the most common widget is a horizontal list (or row of cards), that can react to the D'Pad navigation. Flutter unlocks the D'pad navigation by using the Shortcuts widget. But currently when moving from one node to the other node, there is no smooth animation the whole row flashes to the next item.

It is desired to have a smooth horizontal animation or at latest as an option to so we don't have to build our own, scrolling.

More context

Proposal

This can be achieved by exposing the duration and curve arguments in the _focusAndEnsureVisible method.

void _focusAndEnsureVisible(
    FocusNode node, {
      ScrollPositionAlignmentPolicy alignmentPolicy = ScrollPositionAlignmentPolicy.explicit,
    }) {
  node.requestFocus();
  Scrollable.ensureVisible(node.context!, alignment: 1.0, alignmentPolicy: alignmentPolicy);
}

Will become

void _focusAndEnsureVisible(FocusNode node, { Duration duration, Curve curve,
    ScrollPositionAlignmentPolicy alignmentPolicy =
        ScrollPositionAlignmentPolicy.explicit}) {
  node.requestFocus();
  Scrollable.ensureVisible(
    node.context!,
    alignment: 1.0,
    alignmentPolicy: alignmentPolicy,
    duration: duration,
    curve: curve,
  );
}

@gspencergoog

/cc @gspencergoog

This is a reasonable request, but I'm not sure it makes sense to expose those parameters, since you'd have to plumb them all the way through all of the FocusTraversalPolicy subclasses, and they're fairly specific to scrollables. Perhaps it would be better to have FocusTraversalPolicy take a callback that gets called to request focus on a node, which defaults to _focusAndEnsureVisible, and then you can replace it with your own that does whatever you'd like. You'd have to plumb that through too, but at least it would be more customizable.

It would looks something like adding this to your widget tree:

@override
Widget build(BuildContext context) {
  return FocusTraversalGroup(
    policy: ReadingOrderTraversalPolicy(
      requestFocusCallback: (
        FocusNode node, {
        ScrollPositionAlignmentPolicy alignmentPolicy = ScrollPositionAlignmentPolicy.explicit,
      }) {
        node.requestFocus();
        Scrollable.ensureVisible(
          node.context!,
          alignment: 1.0,
          alignmentPolicy: alignmentPolicy,
          duration: const Duration(seconds: 1), // Obviously, these could be variables too.
          curve: Curves.bounceInOut,
        );
      },
    ),
    child: child,
  );
}

@gspencergoog

@gspencergoog Please let me know what the next steps are. and How can I help?

The next step would be for you to submit a PR with an implementation, if you would like to take that on. If not, then you can wait for this to be addressed by the team, but I suspect it might be quite a while before this is selected to work on. Alternatively, you can find someone else who is willing to put together a PR for this.

See our page on contributing to find out what contributing to Flutter involves.

Expose callback that allows focus traversal customization (#120235)

Expose callback that allows focus traversal customization (flutter#12…

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.

Navigation Menu

Repository navigation

Scrolling with animation to the next focusable node #83175

Use case

Proposal

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Scrolling with animation to the next focusable node #83175

Description

Use case

Proposal

Activity

goderbauer commented on Jun 2, 2021

gspencergoog commented on Jun 2, 2021

websiddu commented on Jan 30, 2022

gspencergoog commented on Jan 31, 2022

github-actions commented on May 31, 2023

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions