Carousel slider width height spacing controll flutter

Question

Carousel slider viewportfraction and aspect ratio. How to calculate aspect ratio to get expected width and height. I use this carousel package.

I want to achieve like this(,). I try aspect ratio ,viewportfraction but my trying isn't work perfectly.

Here is my result . I run on chrome browser. When viewportfraction and aspect ratio can't achieve expected width and height value. How can I calculate aspect ratio and viewportfraction.

Here is my code.

class UiDesignSlider extends StatefulWidget {
  const UiDesignSlider({Key? key}) : super(key: key);

  @override
  State<UiDesignSlider> createState() => _UiDesignSliderState();
}

class _UiDesignSliderState extends State<UiDesignSlider> {
  final u = Get.find<UtilityController>();
  DateTime dateTime = DateTime.now();
  int current = 0;
  final CarouselController _controller = CarouselController();

  final List<String> sliderScreenList = [
    'challenge2',
    'challenge3',
    'challenge4',
  ];

  @override
  Widget build(BuildContext context) {
    bool isMobile = Responsive.isMobile();
    return Container(
      height: isMobile ? 250 : 350,
      width: u.size.width,
      color: Colors.green,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          const SizedBox(height: 30),
          Expanded(
            child: CarouselSlider(
              items: sliderScreenList.map((i) {
                return Builder(
                  builder: (BuildContext context) {
                    return Column(
                      children: [
                        Expanded(
                          child: Image.asset(
                            'assets/images/carousel/$i.png',
                          ),
                        ),
                      ],
                    );
                  },
                );
              }).toList(),
              carouselController: _controller,
              options: CarouselOptions(
                onPageChanged: (index, reason) {
                  setState(() {
                    current = index;
                  });
                },
              ),
            ),
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: sliderScreenList.asMap().entries.map((entry) {
              return GestureDetector(
                onTap: () => _controller.animateToPage(entry.key),
                child: SlideOnOff(
                  isOn: current == entry.key ? true : false,
                  u: u,
                ),
              );
            }).toList(),
          ),
        ],
      ),
    );
  }
}

Answer 1

I got solution myself. Here is my solution.

CarouselSlider(
          items: sliderScreenList.map((i) {
            return Builder(
              builder: (BuildContext context) {
                return Padding(
                  padding:
                      EdgeInsets.symmetric(horizontal: isMobile ? 4 : 8),
                  child: Image.asset(
                    'assets/images/carousel/$i.png',
                  ),
                );
              },
            );
          }).toList(),
          carouselController: _controller,
          options: CarouselOptions(
            viewportFraction: 0.5,
            enlargeCenterPage: false,
            aspectRatio: 2.4,
            onPageChanged: (index, reason) {
              setState(() {
                current = index;
              });
            },
          ),
        )