Problem in scrolling overlapping tiles in flutter

I am building an application with flutter and I have a page with a listView.builder. I wanted the tiles to have some overlapping effect so I used Align. It works fine when I scroll but when I scroll in the opposite direction, the overlapping effect reverses for the tiles that have been out of the screen.
this is a video of what's happening.
pay attention to the top part of the screen when I scroll back.

this is my code:

HomeScreen:

class HomeScreen extends StatelessWidget {
  const HomeScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      floatingActionButton: SizedFABWidget(),
      body: SafeArea(
        child: ListView.builder(
          itemCount: 5,
          itemBuilder: (context, index) {
            return const CardListViewWidget();
          },
        ),
      ),
    );
  }
}

CardListViewWidget:

class CardListViewWidget extends StatelessWidget {
  final List<String> test = [
    '1',
    '2',
    '3',
    '4',
    '5',
    '6',
    '7',
    '8',
    '9',
    '10',
    '11',
    '12',
    '2',
    '3',
    '4',
    '5',
    '6',
    '7',
    '8',
    '9',
    '10',
    '11',
    '12'
  ];

  CardListViewWidget({super.key});

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: Get.width,
      height: kBottomListHeight,
      child: ListView.builder(
          itemCount: test.length,
          itemBuilder: (context, index) {
            return AlignWidget(
              list: test,
              index: index,
            );
          }),
    );
  }
}

AlignWidget:

class AlignWidget extends StatelessWidget {
  final int index;
  final List list;

  const AlignWidget({required this.index, required this.list, super.key});

  @override
  Widget build(BuildContext context) {
    return Align(
      heightFactor: 0.28,
      alignment: Alignment.topCenter,
      child: SizedBox(
        height: kHeight * 0.4,
        child: ListTile(
          shape: RoundedRectangleBorder(
            side: const BorderSide(color: Colors.black12),
            borderRadius: kBorderRadius45,
          ),
          tileColor: getColor(index),
        ),
      ),
    );
  }
}

If anything else is needed please let me know and I'll update this post.
thank you in advance.

I almost tried everything I could find on internet and AIs but couldn't solve it, I also don't really understand why this is happening.
I tried Stack and Positioned, Transform.translate and a couple other things but they couldn't solve my problem.
I want my list with overlapping tiles to not change position and don't get behind or come forward, just stay the same as the first few seconds of the video.

Note: This is just a hack and the problem you are facing is that the widgets are being rebuilt. The below solution is not an efficient solution for large lists.

• Home Screen

   class HomeScreen extends StatelessWidget {
       const HomeScreen({super.key});
  
       @override
       Widget build(BuildContext context) {
         return Scaffold(
           floatingActionButton: SizedFABWidget(),
           body: SingleChildScrollView(
             child: Column(
               children: [for (int i = 0; i < 6; i++) CardListViewWidget()],
             ),
           ),
         );
       }
     }
  

• CardListViewWidget

     class CardListViewWidget extends StatelessWidget {
       final List<String> test = [
         '1',
         '2',
         '3',
         '4',
         '5',
         '6',
         '7',
         '8',
         '9',
         '10',
         '11',
         '12',
         '2',
         '3',
         '4',
         '5',
         '6',
         '7',
         '8',
         '9',
         '10',
         '11',
         '12'
       ];
  
       CardListViewWidget({super.key});
  
       @override
       Widget build(BuildContext context) {
         return SizedBox(
           width: Get.width,
           height: kBottomListHeight,
           child: ListView.builder(
               shrinkWrap: true,
               physics: const NeverScrollableScrollPhysics(),
               itemCount: test.length,
               itemBuilder: (context, index) {
                 return AlignWidget(
                   list: test,
                   index: index,
                 );
               }),
         );
       }
     }    
  

I hope this helps:)