How to make a different design for Middle one(enlargeCenterPage) of carousel slider than other items in Flutter

Question

CarouselSlider(
            items: packList.map((item){
                    return InkWell(
                      child: item,
                      onTap: (){

                      },
                    );
            }).toList(),
            carouselController: _controller,
            options: CarouselOptions(
                autoPlay: true,
                enlargeCenterPage: true,
                height: 230,
                autoPlayInterval: const Duration(seconds: 3),
                autoPlayAnimationDuration: const Duration(milliseconds: 800),
                autoPlayCurve: Curves.fastOutSlowIn,
                pauseAutoPlayOnTouch: true,
                viewportFraction: 0.51,
                onPageChanged: (index, reason) {
                  setState(() {
                    _current = index;
                  });
                }
                ),
          )

Answer 1

I assume you are using carousel_slider package. You can update the items parameter each time when current index changes such that an item with the current index is different from others. Thus, if the item's index equals to the current index, then return a different widget, otherwise return a normal widget.

  items: [
    for (var index = 0; index < items.length; index++) ...[
      if (index == _current) ...[
        FancyWidget(),
      ] else ...[
        NormalWidget()
      ]
    ]
  ],

For example, if you want a center widget to be wrapped with red container, then you will have the following CarouselSlider.

   CarouselSlider(
      options: CarouselOptions(
          autoPlay: true,
          enlargeCenterPage: true,
          height: 230,
          autoPlayInterval: const Duration(seconds: 3),
          autoPlayAnimationDuration: const Duration(milliseconds: 800),
          autoPlayCurve: Curves.fastOutSlowIn,
          pauseAutoPlayOnTouch: true,
          viewportFraction: 0.51,
          onPageChanged: (index, reason) {
            setState(() {
              _current = index;
            });
          }),
      items: [
        for (var index = 0; index < items.length; index++) ...[
          if (index == _current) ...[
            Container(
              color: Colors.red,
              padding: EdgeInsets.all(15),
              child: Image.network(
                items[index],
              ),
            )
          ] else ...[
            Image.network(
              items[index],
            )
          ]
        ]
      ],
    ),