Scrollable Card Stack - flutter

Question

I want to create a scrollable card stack. I want the back one to disappear and the front one to disappear when I slide what is seen in the photo, how can I do that?

Answer 1

The below code should work.
On tapping/clicking anywhere the cards should change position with the topmost card going to the back.
Changing _spacing's value changes the relative horizontal and vertical gaps among the cards in the stack.
Note that the members of the _colors list are in reverse order. This is because, with Stack, widgets are displayed on top of each other based on the last widgets that were added to the children list. This also explains why the call back to setState makes the last member of the _colors list to become the first member instead.
class StackSwipe extends StatefulWidget {
const StackSwipe({Key? key}) : super(key: key);
#override
State<StackSwipe> createState() => _StackSwipeState();
}
class _StackSwipeState extends State<StackSwipe> {
final double _spacing = 16.0;
late double _baseWidth;
final _colors = [
Colors.greenAccent.shade100,
Colors.pink.shade100,
Colors.amber.shade100,
];
#override
Widget build(BuildContext context) {
var deviceWidth = MediaQuery.of(context).size.width;
_baseWidth = deviceWidth > 544 ? 512.0 : deviceWidth - 32;
return Padding(
padding: const EdgeInsets.all(16),
child: GestureDetector(
child: Stack(children: [
..._colors.asMap().entries.map(
(entry) => Positioned(
top: _spacing * entry.key,
left: _spacing * (_colors.length - (entry.key + 1)),
child: Container(
height: 200,
width: _baseWidth -
(_spacing * (_colors.length - (entry.key + 1)) * 2),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(16),
color: entry.value,
),
),
),
)
]),
onTap: () => setState(() => _colors.insert(0, _colors.removeLast())),
),
);
}
}