Flutter,Custom scroll effect

Viewed 17

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],
                    ),
                  ),
                ),
              )
            ],
          ),
        ),
      );
    });
  }
}

enter image description here

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

0 Answers
Related