How to Prevent Right Image from Overlapping the Enlarged Center Image in Flutter CarouselSlider?

Question

I'm utilizing the CarouselSlider in Flutter to display a sequence of images. The desired behavior I'm aiming for is:

The central image should be enlarged and prominently displayed. The images on the immediate left and right of the central image should be partially visible, essentially showing half of them. The issue: the image on the right overlaps the enlarged center image, which I want to avoid.

Here's a version of my implementation:

 Widget build(BuildContext context) {
    double imageWidth = MediaQuery.of(context).size.width * 0.4;
    return Column(
      children: [
        Container(
          width: MediaQuery.of(context).size.width *
              0.8, // This sets the width of the carousel.
          child: CarouselSlider.builder(
            itemCount: imageList.length,
            itemBuilder: (BuildContext context, int itemIndex, int realIndex) {
              bool isCurrentPage = itemIndex == _currentIndex;
              double scale = isCurrentPage ? 1.5 : 1.0;
          return Center(
            child: Transform.scale(
              scale: scale,
              child: Opacity(
                opacity: 1.0,
                child: Image.asset(
                  imageList[itemIndex],
                  fit: BoxFit.fill,
                  width: isCurrentPage ? imageWidth * 0.8 : imageWidth,
                  height: 250,
                ),
              ),
            ),
          );
        },
        options: CarouselOptions(
          height: MediaQuery.of(context).size.height *
              (widget.isMobile ? 0.4 : 0.6),
          autoPlay: true,
          enlargeCenterPage: true,
          viewportFraction: 0.333,
          aspectRatio: 16 / 9,
          onPageChanged: (index, reason) {
            setState(() {
              _currentIndex = index;
            });
          },
        ),
      ),
    ),
    const SizedBox(
      height: 50,
    ),
    Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        buildIndicator(_currentIndex - 1),
        buildIndicator(_currentIndex),
        buildIndicator(_currentIndex + 1),
      ],
    ),
  ],
);

}

here is how it looks like

what I want to achieve:

Answer 1

Result

Explanation

You need to set the enlargeStrategy:

Use enlargeStrategy to determine which method to enlarge the center page.

to CenterPageEnlargeStrategy.height

Notes

you'll have to play around with the aspectRatio/viewportFraction, since your current values it won't really work.

Code

import 'package:carousel_slider/carousel_slider.dart';
import 'package:flutter/material.dart';

final List<String> imgList = [
  'https://images.unsplash.com/photo-1520342868574-5fa3804e551c?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=6ff92caffcdd63681a35134a6770ed3b&auto=format&fit=crop&w=1951&q=80',
  'https://images.unsplash.com/photo-1522205408450-add114ad53fe?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=368f45b0888aeb0b7b08e3a1084d3ede&auto=format&fit=crop&w=1950&q=80',
  'https://images.unsplash.com/photo-1519125323398-675f0ddb6308?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=94a1e718d89ca60a6337a6008341ca50&auto=format&fit=crop&w=1950&q=80',
  'https://images.unsplash.com/photo-1523205771623-e0faa4d2813d?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=89719a0d55dd05e2deae4120227e6efc&auto=format&fit=crop&w=1953&q=80',
  'https://images.unsplash.com/photo-1508704019882-f9cf40e475b4?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=8c6e5e3aba713b17aa1fe71ab4f0ae5b&auto=format&fit=crop&w=1352&q=80',
  'https://images.unsplash.com/photo-1519985176271-adb1088fa94c?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=a0c8d632e977f94e5d312d9893258f59&auto=format&fit=crop&w=1355&q=80'
];

void main() => runApp(ImageSliderDemo());

class ImageSliderDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Image slider demo')),
        body: Center(
            child: CarouselSlider(
          options: CarouselOptions(
            enlargeStrategy: CenterPageEnlargeStrategy.height,
            enlargeCenterPage: true,
          ),
          items: imgList
              .map((item) => Container(
                    child: Center(
                        child: Image.network(item,
                            fit: BoxFit.cover, width: 1000)),
                  ))
              .toList(),
        )),
      ),
    );
  }
}