skip to Main Content

Is it possible to make the pagination start from right to left?

child: Swiper(
                    itemBuilder: (context, index) {
                      final image = letterVowelsImages[index];
                      return Padding(
                        padding: const EdgeInsets.all(25.0),
                        child: Image.asset(
                          image,
                          fit: BoxFit.contain,
                        ),
                      );
                    },
                    indicatorLayout: PageIndicatorLayout.COLOR,
                    autoplay: false,
                    itemCount: letterVowelsImages.length,
                    pagination: const SwiperPagination(
                      builder: DotSwiperPaginationBuilder(
                        color: Colors.black38,
                        activeColor: Colors.black,
                      ),
                    ),
                    control: const SwiperControl(
                      color: Colors.black,
                    ),
                  ),

…………………………………………..

2

Answers


  1. Chosen as BEST ANSWER

    I have tried another method where I just made the index: 2 (2 which is the last index item) inside the Swiper function and it worked. Now the pagination starts from right to left.

    child: Swiper(
                            onIndexChanged: (int index) => activeIndex = index,
                            index: 2, //In my case 2 is the last item/index in the list.
                            itemBuilder: (context, index) {
                              final image = letterVowelsImages[index];
                              return Padding(
                                padding: const EdgeInsets.all(25.0),
                                child: Image.asset(
                                  image,
                                  fit: BoxFit.contain,
                                ),
                              );
                            },
                            indicatorLayout: PageIndicatorLayout.COLOR,
                            autoplay: false,
                            itemCount: letterVowelsImages.length,
                            pagination: const SwiperPagination(
                              builder: DotSwiperPaginationBuilder(
                                color: Colors.black38,
                                activeColor: Colors.black,
                              ),
                            ),
                            control: const SwiperControl(
                              color: Colors.black,
                            ),
                          ),
    

  2. child: Swiper(
      itemBuilder: (context, index) {
        final image = letterVowelsImages[index];
        return Padding(
          padding: const EdgeInsets.all(25.0),
          child: Image.asset(
            image,
            fit: BoxFit.contain,
          ),
        );
      },
      indicatorLayout: PageIndicatorLayout.COLOR,
      autoplay: false,
      itemCount: letterVowelsImages.length,
      pagination: const SwiperPagination(
        builder: DotSwiperPaginationBuilder(
          color: Colors.black38,
          activeColor: Colors.black,
        ),
      ),
      control: const SwiperControl(
        color: Colors.black,
      ),
    ),
    

    Before this code snippet, add the following line to reverse the letterVowelsImages list:

    letterVowelsImages = letterVowelsImages.reversed.toList();
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search