Skip to content

Scrolling with animation to the next focusable node #83175

Description

@websiddu

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,
  );
}

Activity

  1. added
    in triagePresently being triaged by the triage team
    f: scrollingViewports, list views, slivers, etc.
    frameworkflutter/packages/flutter repository. See also f: labels.
    c: proposalA detailed proposal for a change to Flutter
    c: new featureNothing broken; request for a new capability
    and removed
    in triagePresently being triaged by the triage team
    on May 24, 2021
  2. goderbauer commented on Jun 2, 2021

    @goderbauer
    Member
  3. added
    P3Issues that are less important to the Flutter project
    on Jun 2, 2021
  4. gspencergoog commented on Jun 2, 2021

    @gspencergoog
    Contributor

    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,
      );
    }
  5. websiddu commented on Jan 30, 2022

    @websiddu
    Author

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

  6. gspencergoog commented on Jan 31, 2022

    @gspencergoog
    Contributor

    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.

  7. added a commit that references this issue on May 17, 2023
    561169e
  8. added a commit that references this issue on May 24, 2023
    09eb04f
  9. github-actions commented on May 31, 2023

    @github-actions

    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.

  10. locked as resolved and limited conversation to collaborators on May 31, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    P3Issues that are less important to the Flutter projecta: animationAnimation APIsc: new featureNothing broken; request for a new capabilityc: proposalA detailed proposal for a change to Fluttercustomer: googleVarious Google teamsf: focusFocus traversal, gaining or losing focusf: scrollingViewports, list views, slivers, etc.frameworkflutter/packages/flutter repository. See also f: labels.

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions