How to make carousel like swipe on stacked cards? - flutter

Question

I am trying to put stack cards on a center view of flutter container.
Which I am trying to have carousel like swipe or slider only left to right or right to left. On right to left the next card will come up and swipe left to right the prvious card will come back. Something like example link to animation
So far, I have gotten the desired view with Stack and Positioned widgets. Now how do I make the slide or animate look like the example?
So far tried to do it with draggable, which is dragging to all around, which is not the behaviour I am looking for. Then I looked at PageView which will not work with Positioned widget as they are expected to be under Stack. So at the moment I am not sure how to do this? Any guide or example would be really helpful, as I just started flutter a week now.
return Scaffold(
body: SafeArea(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Expanded(
flex: 2,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
SvgPicture.asset(
'assets/images/group_6.svg',
fit: BoxFit.scaleDown,
),
SizedBox(width: 10),
Text(
'My cool Header',
style: TextStyle(
color: const Color(0xFF000000),
fontSize: Constants.height / 70,
fontFamily: 'Exo2',
fontWeight: FontWeight.w600),
),
],
),
),
Expanded(
flex: 13,
child: Stack(
overflow: Overflow.visible,
alignment: Alignment.center,
children: <Widget>[
Positioned(
right: (sizingInformation.screenSize.width * 0.09),
left: (sizingInformation.screenSize.width * 0.21),
child: Card(
color: Colors.blue,
elevation: 10.0,
child: Container(
height: (sizingInformation.screenSize.height * 0.5),
),
),
),
Positioned(
right: sizingInformation.screenSize.width * 0.15,
left: sizingInformation.screenSize.width * 0.15,
child: Card(
color: Colors.red,
elevation: 10.0,
child: Container(
height: (sizingInformation.screenSize.height * 0.55),
),
),
),
],
),
),
Expanded(
flex: 2,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'Some cool text',
style: TextStyle(
color: const Color(0xFF000000),
fontSize: Constants.height / 70,
fontFamily: 'Exo2',
fontWeight: FontWeight.w600,
),
),
Text(
'Some cool text',
style: TextStyle(
color: const Color(0xFF000000),
fontSize: Constants.height / 70,
fontFamily: 'Exo2',
fontWeight: FontWeight.w600),
),
]),
),
Expanded(
flex: 3,
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
// Search
IconButton(
icon: SvgPicture.asset(
'assets/images/group_9.svg',
fit: BoxFit.contain,
),
onPressed: () {
widget.comingFromLogin
? Navigator.push(context,
SlideRightRoute(page: SearchFoodPage()))
: _loginPopUp();
}),
// Add Event
IconButton(
icon: SvgPicture.asset(
'assets/images/group_26.svg',
fit: BoxFit.contain,
),
onPressed: () {
widget.comingFromLogin
? Navigator.push(
context,
MaterialPageRoute(
builder: (context) => Events()))
: _loginPopUp();
},
),
// Profile
IconButton(
icon: SvgPicture.asset(
'assets/images/group_8.svg',
fit: BoxFit.contain,
),
onPressed: () {
widget.comingFromLogin
? Navigator.push(context,
SlideLeftRoute(page: ProfileDrawer()))
: _loginPopUp();
}),
],
),
),
]),
),
);

Answer 1

Is it something like this library: flutter_swiper, stack layout
Swiper(
itemBuilder: (BuildContext context, int index) {
return new Image.network(
"http://via.placeholder.com/288x188",
fit: BoxFit.fill,
);
},
itemCount: 10,
itemWidth: 300.0,
layout: SwiperLayout.STACK,
)