Not working properly on iOS

[kisharora]

Simulator.Screen.Recording.-.iPhone.16.Pro.-.2024-09-27.at.21.18.28.mp4

It leaves blank space under the cards it does not work like it works on android and when you try to scroll, it dissapears.

import 'package:flutter/material.dart';
import 'package:flutter_bounceable/flutter_bounceable.dart';
import 'package:flutter_custom_carousel/flutter_custom_carousel.dart';
import 'package:flutter_animate/flutter_animate.dart';


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

  @override
  State<MyReservations> createState() => _MyReservationsState();
}

class _MyReservationsState extends State<MyReservations> {
  // int? _selectedIndex;
  final _scrollController = CustomCarouselScrollController();
  List<Widget> items = List.generate(20, (i) => Card(i));

  @override
  Widget build(BuildContext context) {
    final size = MediaQuery.of(context).size;
    return Scaffold(
      backgroundColor: Colors.black,
      appBar: DefaultAppBar(size: size, title: 'My Reservations'),
      body: Container(
        color: Colors.orange,
        width: size.width,
        height: size.height,
        child: _buildCarousel(),
      ),
    );
  }

  Widget _buildCarousel() {
    return CustomCarousel(
      itemCountBefore: 4,
      itemCountAfter: 4,
      tapToSelect: true,
      loop: true,
      scrollSpeed: 5,
      controller: _scrollController,
      onSettledItemChanged: (value) => setState(() {
        // _selectedIndex = value;
      }),
      effectsBuilder: CustomCarousel.effectsBuilderFromAnimate(
        effects: EffectList()
            .flipV(begin: -0.25, end: 0.8, perspective: 1)
            .slideY(
              end: 0.5,
            )
            .scaleXY(begin: 0.5, curve: Curves.fastEaseInToSlowEaseOut)
            .align(
              begin: const Alignment(0, -1.5),
              end: const Alignment(0, 5),
              curve: Curves.easeIn,
            ),
      ),
      children: items,
    );
  }
}

class Card extends StatelessWidget {
  const Card(this.index, {super.key});
  final int index;

  @override
  Widget build(BuildContext context) {
    final color1 = Color((0xFF000000 + index * 0x100000).toInt());
    final color2 = Color((0xFFFFFFFF - index * 0x200000).toInt());

    return Bounceable(
      onTap: () {
        AppHaptics.heavyImpact();
      },
      child: FractionallySizedBox(
        widthFactor: 0.8,
        child: AspectRatio(
          aspectRatio: 0.9,
          child: Container(
            decoration: BoxDecoration(
              gradient: LinearGradient(
                begin: Alignment.topLeft,
                end: Alignment.bottomRight,
                colors: [color1, color2],
              ),
              border: const Border(
                top: BorderSide(color: Colors.white38, width: 2),
              ),
              borderRadius: BorderRadius.circular(20),
            ),
          ),
        ),
      ),
    );
  }
}