Draggable and swipable container in flutter

Question

I'm new to flutter and I'm looking for a way to implement a simple feature. A draggable container.

I have two groups of UI elements wrapped in a Container widget. I want to be able to go from one group to another by dragging or swiping in different directions.

How would I go about doing this?

Here are sample images of my UI design to help you understand what I want to achieve:

Image #1

Image #2

As you can see, Image #1 and Image #2 are only different in the bottom part of my design. I have already created all the necessary UI elements and wrapped them in the Container widget. Now the only thing I need is the ability to go from one group to another. It would also be nice if there was a callback method that could update the buttons above upon transitioning from one group to another.

Thanks in advance!

Solution

There are many possibilities to achieve this, depends on your exact wishes, here are 3 ideas:

1. Using a TabBarView to swipe the entire screen, Tab1 will be the first screen you showed, and Tab2 will be second screen - only the contents. (you probably did not want that, but just putting it out there).

2. Dividing the container into 2 pieces (vertically), and placing the TabBarView on the bottom part, having 2 tabs: 1 with the Today part and one with the Weekly part. (there are a few examples out there, for instance: divide screen into two equal parts in flutter).

You can also customize the build method to change anything (for example the top indicator) based on the current tab index (as asked and answered here: How to get current tab index in Flutter)

For a more custom solution you can use:

3. GestureDetector wrapped around your container, and handle OnHorizontalDragX (where X is Start, End etc.) to do any custom stuff - maybe changing the state and trigger a rebuild with the new image

Comments

[Michael]

Thanks! This is what I was looking for!