how to display two images in a single page of slider in flutter

Issue

I am new to flutter community. I had used image slider plugin for portrait image and carousal pro plugin for landscape image slider , facing issue while dividing the slider into two images where not able to get different index images while sliding and everything is working properly . I want to display images from list of images. Here auto play functionality is necessary. Thanks in advance.

Already tried below code

//method
 List<T> map<T>(List list, Function handler) {
    List<T> result = [];
    for (var i = 0; i < list.length; i++) {
      result.add(handler(i, list[i]));
    }
    return result;
  }

//swiper
  swiperTwoImageShow() {
    return isAutoPlay
        ? Center(
      child: Carousel(
        showIndicator: false,
        autoplay: true,
        images: map<Widget>(widget.imageUrl, (index, i) {
          String tempOddImage;
          String tempEvenImage;
          index % 2 == 0 ? tempEvenImage = i : tempOddImage = i;

          return Row(
            children: [
              Expanded(
                flex: 1,
                child: CachedNetworkImage(
                    imageUrl: tempOddImage ?? tempEvenImage,
                    fit: BoxFit.contain),
              ),
              Expanded(
                flex: 1,
                child: CachedNetworkImage(
                    imageUrl: tempEvenImage ?? tempOddImage,
                    fit: BoxFit.contain),
              ),
            ],
          );
        }),
      ),
    )
        : Center(
      child: ImagesSlider(
        items: map<Widget>(oddArray, (index, i) {
          return Row(
            children: [
              Expanded(
                flex: 1,
                child: Container(
                  width: Utils.getDeviceWidth(context),
                  child: CachedNetworkImage(
                      imageUrl: i, fit: BoxFit.contain),
                ),
              ),
              Expanded(
                flex: 1,
                child: Container(
                  width: Utils.getDeviceWidth(context),
                  child: CachedNetworkImage(
                      imageUrl: i, fit: BoxFit.contain),
                ),
              ),
            ],
          );
        }),
        autoPlay: false,
        viewportFraction: 1.0,
        aspectRatio: 1.0,
        distortion: false,
        updateCallback: (index) {
          setState(() {
            _current = index;
          });
        },
      ),
    );
  }

Solution

Try to use below code:

swipeTwoImageShow() {
    return isReloading
        ? Container()
        : Align(
            alignment: Alignment.center,
            child: CarouselSlider.builder(
              options: CarouselOptions(
                  initialPage: widget.index,
                  aspectRatio:
                      MediaQuery.of(context).orientation == Orientation.portrait
                          ? 1
                          : (MediaQuery.of(context).size.width / 3) /
                              (MediaQuery.of(context).size.height / 2.2),
                  viewportFraction: 1,
                  autoPlay: isAutoPlay),
              itemCount: summaryShow
                  ? ((widget.shortDescription.sommaire.length - 1) / 2).round()
                  : ((widget.imageUrl.length - 1) / 2).round(),
              carouselController: carouselController,
              itemBuilder: (context, index) {
                final int first = index * 2;
                final int second = first + 1;
                return Row(
                  children: [first, second].map((idx) {
                    return Container(
                      height: Utils.getDeviceHeight(context),
                      width: MediaQuery.of(context).orientation ==
                              Orientation.portrait
                          ? Utils.getDeviceWidth(context) / 2
                          : Utils.getDeviceWidth(context) / 3,
                      child: CachedNetworkImage(
                        imageUrl: summaryShow
                            ? widget.shortDescription.sommaire[idx].pageUrl
                            : widget.imageUrl[idx],
                        fit: MediaQuery.of(context).orientation ==
                                Orientation.landscape
                            ? BoxFit.fill
                            : BoxFit.contain,
                        height: MediaQuery.of(context).orientation ==
                                Orientation.portrait
                            ? Utils.getDeviceHeight(context)
                            : Utils.getDeviceHeight(context) / 2,
                        width: MediaQuery.of(context).orientation ==
                                Orientation.portrait
                            ? Utils.getDeviceWidth(context) / 2
                            : Utils.getDeviceWidth(context) / 3,
                      ),
                    );
                  }).toList(),
                );
              },
            ),
          );
  }

Answered By – Priyesh

Answer Checked By – Katrina (FlutterFixes Volunteer)