Repository navigation
Scrolling with animation to the next focusable node #83175
Description
Activity
- addedin triagePresently being triaged by the triage teamPresently being triaged by the triage teama: animationAnimation APIsAnimation APIsf: scrollingViewports, list views, slivers, etc.Viewports, list views, slivers, etc.frameworkflutter/packages/flutter repository. See also f: labels.flutter/packages/flutter repository. See also f: labels.c: proposalA detailed proposal for a change to FlutterA detailed proposal for a change to Flutterc: new featureNothing broken; request for a new capabilityNothing broken; request for a new capabilityand removedin triagePresently being triaged by the triage teamPresently being triaged by the triage team
on May 24, 2021 - addedf: focusFocus traversal, gaining or losing focusFocus traversal, gaining or losing focus
on Jun 2, 2021 /cc @gspencergoog
- addedP3Issues that are less important to the Flutter projectIssues that are less important to the Flutter project
on Jun 2, 2021 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
FocusTraversalPolicysubclasses, and they're fairly specific to scrollables. Perhaps it would be better to haveFocusTraversalPolicytake 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, ); }
Reacted by Étienne@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.
- added a commit that references this issue
on May 17, 2023 - added a commit that references this issue
on May 24, 2023 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 -vand a minimal reproduction of the issue.- locked as resolved and limited conversation to collaborators
on May 31, 2023
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
Shortcutswidget. 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
durationandcurvearguments in the_focusAndEnsureVisiblemethod.Will become