How to implemented overlapped card with animation in flutter? - flutter

Question

I'm trying to implement overlapped card with animation like below video which I have mentioned. I'm going to explain what I want to achieve, Look if I choose a card then that particular card should be expand and rest of the cards will be shrink toward the below but I could not able to do because, I'm so dumb in animation stuff,
Please look at this expected video :
video
CODE:
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import '../../../../Utility/colorsScheme.dart';
import 'dart:math' as math;
class SubscriptionPlansScreen extends StatelessWidget {
const SubscriptionPlansScreen({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
elevation: 1,
backgroundColor: Colors.white,
title: Text(
"Subscription Plans",
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.w500,
fontSize: ScreenUtil().setSp(20),
),
),
centerTitle: true,
automaticallyImplyLeading: false,
leading: IconButton(
onPressed: () {
Navigator.of(context).pop();
},
icon: Icon(
Icons.arrow_back_ios_rounded,
color: Colors.black,
)),
),
body: LinearOverlappedStack());
}
}
class LinearOverlappedStack extends StatelessWidget {
final double size;
LinearOverlappedStack({Key? key, this.size = 50}) : super(key: key);
List<String> plans = [
"Premium",
"Gold (Monthly plan)",
"Silver (Monthly plan)",
"Bronze (Monthly plan)"
];
#override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.only(
top: 25.0,
),
child: Stack(
alignment: AlignmentDirectional.topCenter,
children: [...getListPosition(context)]),
);
}
getListPosition(BuildContext context) {
List<Widget> list = [];
for (int i = 0; i < plans.length; i++) {
list.add(AnimatedPositioned(
duration: Duration(seconds: 1),
top: getTopGap(i),
child: InkWell(
onTap: () {},
child: Container(
width: MediaQuery.of(context).size.width * 0.9,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: Colors.grey,
border: Border.all(
color: ColorsList.cardBorder,
)),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Container(
alignment: Alignment.center,
padding: const EdgeInsets.all(10),
child: Text(
plans[i],
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
fontSize: ScreenUtil().setSp(20),
),
),
decoration: BoxDecoration(
color:
Color((math.Random().nextDouble() * 0xFFFFFF).toInt())
.withOpacity(1.0),
borderRadius: BorderRadius.only(
topLeft: Radius.circular(10),
topRight: Radius.circular(10))),
),
Divider(
color: ColorsList.cardBorder,
height: 1,
),
Container(
padding: const EdgeInsets.all(50),
alignment: Alignment.center,
)
],
),
),
),
));
}
return list;
}
double getTopGap(int i) {
return i * 80;
}
}
OUTPUT :