How do I animate a flutter widget on top of a widget that comes after it in the hierarchy? - flutter

Question

I have a simple screen with two widgets inside of a Column widget. When I tap the top widget I want it to move down to the second widget. That part is working, however when it slides down it is going behind the bottom widget instead of in front of the bottom widget. I'm assuming this is because the bottom widget is created second in my code. Is there a way to bring the top widget to the front? Here is my code:
AnimationController _controller;
Animation<Offset> _offsetAnimation;
#override
void initState() {
super.initState();
_controller = AnimationController(
duration: const Duration(seconds: 2),
vsync: this,
);
_offsetAnimation = Tween<Offset>(
begin: Offset.zero,
end: const Offset(0.0, 1.0),
).animate(CurvedAnimation(
parent: _controller,
curve: Curves.easeInOut,
));
}
#override
void dispose() {
_controller.dispose();
super.dispose();
}
#override
Widget build(BuildContext context) {
GlobalKey<FlipCardState> cardKey = GlobalKey<FlipCardState>();
return Scaffold(
backgroundColor: Colors.grey,
body: Center(
child: Column(
children: <Widget>[
SizedBox(height: 30),
Expanded(
flex: 1,
child: SlideTransition(
key: cardKey,
position: _offsetAnimation,
child: GestureDetector(
onTap: () {
_controller.addStatusListener((status) {
if (status == AnimationStatus.completed) {
_controller.reset();
}
});
_controller.forward();
},
child: EmptyPile(
title: "First Card",
),
),
),
),
Expanded(flex: 1,
child: EmptyPile(
title: "Second Card",
),
),
]
),
),
);
}
For completeness, but I don't think this matters, here is my EmptyPile code:
class EmptyPile extends StatelessWidget {
EmptyPile({Key key, this.title}) : super(key: key);
final String title;
#override
Widget build(BuildContext context) {
return Container(
width: MediaQuery.of(context).size.width * 0.7,
margin: EdgeInsets.fromLTRB(0, 30, 0, 30),
decoration: borderDecoration(),
child: Center(
child: Text(
title,
textAlign: TextAlign.center,
style: TextStyle(fontSize: 30.0),
),
),
);
}
}
And finally my border decoration:
BoxDecoration borderDecoration() {
return BoxDecoration(
border: Border.all(
width: 5,
),
borderRadius: BorderRadius.all(
Radius.circular(10)
),
color: Colors.white
);
}

Answer 1

Well as simple as it is I would first of all wrap them in a Stack(). In this case you have access to layers and can define with your sequence which widget is in front and which not.
I'm assuming this is because the bottom widget is created second in my code.
You should have a valid workaround with the above approach.
Hope it helps!