ScrollView/Draggable that allows scrolling in both directions (x, y) with overscroll physics

Use cases: tables, calendars, images.

It's quite difficult to do this with the current classes, as classes like ScrollPosition, Scrollable and ScrollContext only support one scroll direction.

The biggest problem I hit so far is that ScrollPosition stores it state directly in ScrollContext.storageContext, without a key. So when you have two ScrollPositions in a single widget (one for each axis), those will override each other when the scroll offset is saved.

I'm currently working on a demo for the gallery that shows how to do this. I hope to turn it into its own widget after I get that merged. #25164

Spent the better part of a day trying to get this setup and it feels like this is too far upstream in Flutter to make this a simple task for a layman. Requesting suggestions from team members for a strategy for making a PR against this issue. My immediate goal is to create a 2d PageView with user defined keep-alives for heavyweight children like maps/videos.

My plan was to take the GestureTransformable widget from that 2D Transformations gallery demo and move it into the main widgets/ directory with a few improvements and tests.

I tried to write it in a way that it could easily be made into a first party widget, but there was more work I wanted to do to split it up to make it more reusable and generic. I started working on that in this branch but haven't had time to finish it. Ideally I wanted to split out a core public widget that accepted a Matrix4 as a parameter and reported gestures on the transformed child, but didn't modify the matrix itself. Then I wanted a higher level public widget that used the core one internally and worked more or less like GestureTransformable does in that demo.

I won't get to this myself for awhile, so if you want to take that code and turn it into a first party widget yourself, please do!

@justinmc

came here while searching for something similar what OP asked for:
I have a PageView and want to be able to transform its children while scrolling according to the dx (on horizontal scroll) movements.
I tried using a RawGestureDetector with a custom PanGestureRecognizer, but that comes of the price of no longer having the BouncingScrollPhysics and the need to manually implement fling gestures etc...

@justinmc I looked at your GestureTransformable widget but it bugs me if there isn't a more simple solution than that for my specific use case... maybe you have an idea?:
It seems to me the easiest solution would be - while keeping all benefits of ListView/PageView and Physics - if ListView and PageView would register the user input movements (the drag) along their cross-axis.

@apptum, this might be helpful for extracting DX for a single page inside a pageview

... NotificationListener<ScrollNotification>(
  onNotification: (notification) {
    /// Our immediate PageView
    if (notification.depth == 0) {
      final PageMetrics metrics = notification.metrics;
      page = (metrics.page); // double page progress


      return true;
    }

    /// Default to passing thru
    return false;
  },

  /// Row page view that builds individual cells, gotta pipe dx into your pages here
  child: PageView.whatever(),
);

/// Here's how to get dx
double get dx => (page - pageIndex).clamp(-1, 1).toDouble();

@lukepighetti

hey @lukepighetti & thanks! But on your answer I see that I misdescribed the problem: I want the cross-axis value of a scrollable! On a PageView that'd be the dy (when in default Axis.horizontal) ...

Has anybody been able to make progress on this? I want to make an EPG (electronic/television programme guide) style layout but there doesn't seem to be anything out there that do it.

Yes actually, this is in progress and coming soon! Here's the WIP PR: #44015

I've mainly been thinking of that widget being used for photo viewers, etc. I'm not sure how well it will cover this use case, but if you think it will, let me know if there's anything I can do to accommodate.

@justinmc

That's great news @justinmc - I've been hoping for something like this for some time (see 23457).
My use case is similar to @l-k22 's: I need to put lots of custom sized boxes on the display, and be able to scroll about and zoom. The number and sizes of boxes will be dynamic.
I see your PR is nearly there, so I'll wait for it and give it a try out. :)

I'd like something similar for ListView. I have a list of items, but they can overflow the width so I want the list to be horizontally scrollable too. I did try wrapping the entire list in a horizontal ScrollView but it gave me errors about unbounded sizes. Maybe it works with a few more widgets but I feel like you should just be able to tell ListView to make the cross-axis scrollable.

@muirandy

@muirandy I'm glad this will be useful! I'm interested to see how the dynamic size of the boxes will work with this. Let me know once it's merged and you try it out.

@Timmmm

@Timmmm Currently ListView can't scroll both axes. This seems like something that should be doable with InteractiveViewer though. I'll try to specifically try it out. See this table example I made:

@justinmc

@justinmc That looks interesting, thanks! Do you have a link to this "InteractiveViewer"? Google doesn't seem to know about it.

It's still a work in progress, but hopefully I'll finish it soon: #44015

@justinmc

I need such a widget especially for using in Flutter Web. #49109 You can check this issue.

It must have a smooth scrolling for both directions. Also, a bool property for locking the scroll direction after the scroll direction detected. (If it is horizontal, lock it to be scrolled only horizontally, else to be scrolled only vertically. This should be optional. Of course, the default behavior must be both directions. )
Cells should be rendered on-demand as ListView.builder does. Otherwise, there will be a huge performance loss.

@justinmc Great news to hear! I really appreciate your work and am very thankful.

EDIT: By the way, there is already a package related to this. However, it lacks the features I request.

https://pub.dev/packages/diagonal_scrollview

@yasinarik

@yasinarik Thanks for letting me know you need this, I was hoping to get some feedback like this. I think your first bullet point should be fairly straightforward. I'll try to include it in my PR.

The second bullet point will be a bit trickier, but I imagine it should be doable just like ListView.builder... I won't be able to include it in the initial PR, but I think it's something we that would make sense to add afterwards.

@justinmc

@justinmc Great news!

The InteractiveViewer widget should now handle this, but it still has some missing features:

No on-demand rendering: InteractiveViewer builder constructor #58603
Direction locking: InteractiveViewer scroll direction locking #58043
Overscroll: InteractiveViewer overscroll #58042

@justinmc

@justinmc is there anyway in which in the computer i could say that the scroll wheel is for scrolling and then to zoom I have to press control + scroll wheel?

@marcosagni98

@marcosagni98 Unfortunately you'll have to hack your own InteractiveViewer to achieve that right now. At this line the pointer scroll is hard coded to do a scale.

We should make it possible to customize that though... I'm not sure how we could cleanly do that.

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

ScrollView/Draggable that allows scrolling in both directions (x, y) with overscroll physics #20175

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

ScrollView/Draggable that allows scrolling in both directions (x, y) with overscroll physics #20175

Description

Activity

justinmc commented on Jan 29, 2019

lukepighetti commented on Sep 6, 2019

justinmc commented on Sep 11, 2019

Tobbyte commented on Sep 16, 2019

lukepighetti commented on Sep 16, 2019

Tobbyte commented on Sep 17, 2019

l-k22 commented on Nov 5, 2019

justinmc commented on Nov 5, 2019

muirandy commented on Jan 2, 2020

Timmmm commented on Jan 8, 2020

justinmc commented on Jan 13, 2020

justinmc commented on Jan 13, 2020

Timmmm commented on Jan 17, 2020

justinmc commented on Jan 17, 2020

yasinarik commented on Jan 18, 2020

justinmc commented on Jan 21, 2020

yasinarik commented on Jan 22, 2020

justinmc commented on Jun 3, 2020

marcosagni98 commented on May 4, 2021

justinmc commented on Jun 23, 2021

github-actions commented on Jul 31, 2021

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions