How to make stacked cards animate to go behind each other

Question

I am trying to make a PageView with only 2 items. But I want to see the card behind the first one. And when swipe it to the right I want it to animate to the back and the back card animate to the front.

I have found a similar solution but not quite it, Flutter Swiper. It does allow me to see the card behind however it's not as much as I want and it doesn't animate to the back instead it just disappears to the right. Also, I want to make it "pop-out" on the right and not on the left.

Any help would be useful to point me in a direction. Thanks.

Answer 1

Simply change the order of the children of Stack when needed:

var children = <Widget>[Widget1(), Widget2()];
Stack(
  children: children,
)

when Widget2()'s position has been animated to the edge:

setState((){
  children = <Widget>[Widget2(), Widget1()];
});