I am developing a mobile app that includes a graph of data on a page. I want to be able to scroll sections of the graph based on user input and am unsure about how to go about this. I am new to Flutter and still learning a lot so am looking for a design steer, i.e. what components to use and how to structure those to achieve the effect that I want.
I currently have the whole page scrolling with a ScrollerView
and ScrollControllers
, but this means that the top row (the heading and axis), plus the left column (the row labels), scroll off the page. It also means that the user has to scroll the application using scroll bars rather than being able to use gestures anywhere on the screen.
I want to implement a solution where the user can scroll up/down, but the heading and axis stay in place, or can scroll left/right and the heading and row labels remain in place. The image below hopefully shows what I want to achieve.
What are the best components to use to achieve this effect? I am thinking I might have to implement RawGestureDetectors
and CustomScrollViews
, but wondering if there are some simpler out-of-the-box components to achieve this effect? I am happy to read/learn about whatever is recommended and how to implement these myself, but can someone steer me in a direction in terms of which out-of-the-box components might be best to do this and how these might need to be structured (i.e. parent and child relationships).
I have done a search on stackoverflow and not found anything that specifically covers this, other than an unanswered question here: How to implement a whatsapp mobile scroll effect in flutter. If there are other questions with answers or articles that someone can point me to then I am happy to read these too.
2
Answers
I have managed to achieve the effect I want using
GestureDetector
andAnimatedBuilder
widgets. It needs some tidying up to set limits about how far the user can slide the contents, but I have managed to get the top row axis and chart content to slide left and right in sync, and the left-hand labels and chart content to slide up and down in sync.I have made use of
DecoratedBox
with a colour to mask areas of the screen where I want to hide the scrolling text, andStack
to ensure that the components are drawn in the right order so that the scrolling text moves under the masks. I haven't bothered with the edges of the app, because my chart is full screen in my mobile app. However, if you wanted to use this effect on a subsection of the screen then you would need to implement masking around the rest of the screen so that the text doesn't show up.If anyone knows a better way to do this, e.g. only painting the area of the screen where it is visible to the user, then please post an example because that might be a better way to do things.
Here is my code if anyone wants to see how I managed this:
The exact thing you’re looking for isn’t available yet but you can see the preview for two-dimensional scrolling here.
For now, I would implement the yellow box using a CustomScrollView with a SliverAppBar.
You can also give the DataTable widget a try.