CODEWITHSUNDEEP
flutter
Alex
Alex

Reputation: 827

Swipe up and down to overlay two widget in Flutter

I'm using flutter

enter image description here

I'm having 2 widget A and B with position like photo above. How can I move widget B overlay widget A when touch or swipe-up from widget B and back when swipe-down?

Upvotes: 0

Views: 1315

Answers (2)

xiguang lu
xiguang lu

Reputation: 39

Stack Learn about => https://api.flutter.dev/flutter/widgets/Stack-class.html

A widget that positions its children relative to the edges of its box.

This class is useful if you want to overlap several children in a simple way, for example having some text and an image, overlaid with a gradient and a button attached to the bottom.

Upvotes: 0

Quasi
Quasi

Reputation: 679

Make a GestureDetector and give it a stack as a child. Create a variable in your class thats called y or whatever name you want. In your stack make 2 positioned widgets.

positioned(
    top: 0
    left: 0
),
positioned(
    top: y
    left: 0
)

make your two Widgets A and B childs of the positioned. Widget B has to be in the second positioned for it to overlay the first.

Make an AnimationController in your class and set its start value to 0 and its end value to the y. Use the onVerticalDragDownmethod of the GestureDetector to detect vertical swipes and check if it was from top to bottom or from bottom to top. If it was from bottom to top call animationController.reverse();, if it was from top to bottom call animationController.forward();. In the animationController Listener call setState((){y = animationController.value}). If you dont want it to be animated just set y to the values that you need.

Upvotes: 1

Related Questions