I'm trying to write code for this animation https://www.linkedin.com/posts/glebich_design-for-me-is-not-only-about-apparent-ugcPost-6965578356385861632-PQlj/?utm_source=linkedin_share&utm_medium=android_app Card animation only, here what I tried so far
import 'dart:math';
import 'package:flutter/material.dart';
import 'package:supercharged/supercharged.dart';
class CardScrollView extends StatefulWidget {
const CardScrollView({super.key});
@override
State<CardScrollView> createState() => _CardScrollViewState();
}
class _CardScrollViewState extends State<CardScrollView> {
int _currentIndex = 1;
@override
Widget build(BuildContext context) {
return LayoutBuilder(builder: (_, b) {
return Padding(
padding: const EdgeInsets.all(8.0),
child: GestureDetector(
onTap: () {
setState(() {
_currentIndex++;
});
},
child: Stack(
children: [
...List.generate(
12,
(index) => Align(
alignment: _currentIndex > index
? Alignment.topCenter
: Alignment.bottomCenter,
child: Container(
height: b.maxHeight * .5,
transform: _currentIndex > index
? Matrix4.identity()
: (Matrix4.identity()
..setEntry(3, 2, .001)
..translate(
0.0, (index %= 4) * -35, (index %= 4) * 30)
..rotateX(300 / 180 * pi)),
transformAlignment: Alignment.bottomCenter,
decoration: BoxDecoration(
color: Colors.primaries.pickOne(),
boxShadow: kElevationToShadow[12],
),
),
),
)
],
),
),
);
});
}
}
I able to implement animation for matrix4 but for only card I feel there's a best way to do such thing with a smooth animation
thanks in advance
