3d Image Carousel Slider flutter

Question

I want to make a widget that rotates in a circle around a cylinder Exactly like the picture I sent Is there anyone who can help me? I use CarouselSlider, but it's not what I want.

I found flutter_gallery_3d: ^1.1.1, but it's not stable at all, and I can't make my UI.

Here is a code I wrote :

class CinemaStackCarouselSliderCarts extends StatefulWidget {
  const CinemaStackCarouselSliderCarts({super.key});

  @override
  State<CinemaStackCarouselSliderCarts> createState() => _CinemaStackCarouselSliderCartsState();
}

class _CinemaStackCarouselSliderCartsState extends State<CinemaStackCarouselSliderCarts> {
  final List<String> imageUrlList = [
    "https://m.media-amazon.com/images/I/71eHZFw+GlL._AC_UF894,1000_QL80_.jpg",

....
  ];

  int currentIndex = 0;

  late Gallery3DController controller;

  @override
  void initState() {
    controller = Gallery3DController(itemCount: imageUrlList.length, autoLoop: true, ellipseHeight: 0, minScale: 0);
    super.initState();
  }

  Widget buildGallery3D() {
    return Padding(
      padding: EdgeInsets.only(right: 60.w),
      child: SizedBox(
        height: 270.w, // Adjust based on your UI design
        child: Gallery3D(
          controller: controller,
          itemConfig: GalleryItemConfig(width: 341.w, height: 270.w, radius: 12.w, isShowTransformMask: true),
          width: MediaQuery.of(context).size.width,
          // Full width of the device
          height: 270.w,
          // Height of the carousel
          isClip: false,
          // Set based on whether you want to clip overflowed content

          // Adjust padding to center the image in the carousel
          onItemChanged: (index) {
            setState(() {
              currentIndex = index; // Update the current index
            });
          },
          itemBuilder: (context, index) {
            return SizedBox(
              width: currentIndex == index ? 340 : 214,
              child: CinemaCarosuleCircleWidget(image: imageUrlList[index], isCenter: currentIndex == index ? true : false),
            );
          },
        ),
      ),
    );
  }
  
  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        TitleClipsTvHome(
          title: "serials",
          hasMore: true,
          moreFunction: () {
            Get.find<BottomNavigationController>().replacePageAtIndex(1, MoreVideosPageFilter(titlePage: "serials"), whiteColorAppbar: AppColors.castleBanner);
          },
        ),
        Padding(
          padding: EdgeInsets.only(left: 95.w, right: 70.w),
          child: buildGallery3D(),
        ),
      ],
    );
  }
}

also here is my widget :

class CinemaCarosuleCircleWidget extends StatelessWidget {
  final image;
  final isCenter;

  const CinemaCarosuleCircleWidget({super.key, this.image, this.isCenter});

  @override
  Widget build(BuildContext context) {
    return InkWell(
      onTap: () {
        Get.find<BottomNavigationController>().replacePageAtIndex(1, AvaCinemaSingleMoviePage(imageUrl: image), whiteColorAppbar: AppColors.castleBanner);
      },
      child: Stack(
        alignment: Alignment.center,
        children: [
          Container(
            width: 214.w,
            height: 310.w,
            decoration: ShapeDecoration(
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(12),
              ),
            ),
            child: ClipRRect(
                child: CachedNetworkImage(
              imageUrl: image,
              fit: BoxFit.fill,
            )),
          ),
          Container(
            width: 214.w,
            height: 310.w,
            decoration: ShapeDecoration(
              color: Colors.black.withOpacity(0.30000001192092896),
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(12),
              ),
            ),
          ),
          isCenter ? SvgPicture.asset(EnvIcons.playIcon) : SizedBox(),
        ],
      ),
    );
  }
}