Home > Back-end >  How do show last index image as first in carousel slider in flutter
How do show last index image as first in carousel slider in flutter

Time:05-06

My carousel widget code is:

return CarouselSlider.builder(
  itemCount: mytest.length,
  options: CarouselOptions(
    enlargeCenterPage: true,
    height: 300,
    autoPlay: false,
    reverse: false,
    aspectRatio: 5.0,
     initialPage: mytest.length-1,
    enableInfiniteScroll: false,
  ),
  itemBuilder: (context, i, id){
    //for onTap to redirect to another screen
    return GestureDetector(
      child: Container(
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(15),
          border: Border.all(color: Colors.white,)
      ),
        //ClipRRect for image border radius
        child: ClipRRect(
          borderRadius: BorderRadius.circular(15),
          child: isURL(mytest[i])?
          Image.network(
            mytest[i],
          width: 600,
          fit: BoxFit.cover,
          ):Image.file(widget.localstorageurl,width: 600,fit: BoxFit.cover),
        ),
      ),
    );
  },
);

I have trying to show last image of the list as first or last image as an initial page. How to display last index image from list as first of the carousel slider in flutter. Thanks in advance.

CodePudding user response:

I have a carousel too, but i don't use Builder.

But before, my itemList i send it like itemsList.reversed.toList() to start with the last one :

  final someList = itemsList.reversed.toList();


  CarouselSlider(
      carouselController: carouselController,
      options: CarouselOptions(
        viewportFraction: 1.0,
        height: someHeight,
        initialPage: index,
        enableInfiniteScroll: false,
      ),
      items: someList.map( // i use it like this
        (item) {
          return Builder(
            builder: (BuildContext context) {
              return Container(
                decoration: BoxDecoration(
                  color: Colors.grey[200],
                ),
                child: ...,
              );
            },
          );
        },
      ).toList(),
    ),
  • Related