I am using Flutter swiper package and I want to achieve the following activity

1k Views Asked by At

I am Using a Swiper Widget. I was able to swipe front and back. But i also want the functionality swiping to the next card while on a onPressed event. Moreover by pressing a button, I want to move to the next card. How to achieve this functionality. This is my Swiper Widget.

Swiper(
                              scrollDirection: Axis.horizontal,
                              itemCount: studentDataWithAttendanceData.isEmpty
                                  ? 0
                                  : studentDataWithAttendanceData.length,
                              itemBuilder: (BuildContext context, int index) {
                                return MyClassRoomCard(
                                  studentData:
                                      studentDataWithAttendanceData[index]
                                          .studentData,
                                  attendanceStatus:
                                      studentDataWithAttendanceData[index]
                                          .attendanceStatus,
                                );
                              },
                              scale: 0.8,
                              viewportFraction: 0.9,
                              onIndexChanged: rollNumberCallback,
                              layout: SwiperLayout.STACK,
                              itemWidth: 375,
                              itemHeight: 500,
                              pagination: SwiperPagination(
                                builder: DotSwiperPaginationBuilder(
                                  activeColor: Colors.indigo.shade400,
                                  color: Colors.grey.shade400,
                                ),
                              ),
                              control: SwiperControl(
                                color: Colors.indigo.shade400,
                                padding: EdgeInsets.symmetric(horizontal: 15.0),
                                iconPrevious: Icons.arrow_back_ios_rounded,
                                iconNext: Icons.arrow_forward_ios_rounded,
                                size: 20,
                              ),
                            )

And this is my button

 RaisedButton(
            elevation: 5.0,
            padding: EdgeInsets.all(22.0),
            onPressed: onTap,//---------------->by tapping this, I want to change the card to the next.
            child: Icon(
              icon,
              color: iconColor,
              size: 50.0,
            ),
            color: buttonColor,
            shape: CircleBorder(),
          ),
2

There are 2 best solutions below

0
On BEST ANSWER

add a controller to the swipper SwiperController controller = SwiperController(); then on the onTap call controller.next()

0
On

You have to define and add controller to the swipper after that you can control the swipper on onTap event.such as

final controller=SwiperController()

After that assign it to the Swipper as

Swiper(
    controller: SwiperController(),
    //Rest are the same...
)

Now you can control the index of the swipper using the controller and change the state by calling method such as

controller.move(1);
controller.next();
controller.previous();


onTap(){
    controller.next();
    //call the method
}