edit pagination in flutter swiper

Question

I want to make a custom pagination for swiper in flutter. Where i want to display 2 words in pagination rather then dots or fractions can anyone tell me a better way to do it as in my code i can't change the page on clicking on my custom pagination.

My code:-

Swiper(
          controller: swiperController,
          itemCount: 2,
          itemBuilder: (context,index){
            return index==0?A(context):B(context); //Here A and B are 2 pages to swipe between
          },
          pagination: new SwiperPagination(
              margin: new EdgeInsets.all(0.0),
              builder: new SwiperCustomPagination(builder:
                  (BuildContext context, SwiperPluginConfig config) {
                return Container(
                  padding: EdgeInsets.only(bottom: 10),
                  child: config.activeIndex==0?Text.rich(
                      TextSpan(text: "",style: TextStyle(color: Colors.white54),children: [
                        TextSpan(text: "First   ",style: TextStyle(fontSize: 25.0,fontWeight: FontWeight.bold),),
                        TextSpan(text: "   Second ",recognizer: TapGestureRecognizer()..onTap=(){},style: TextStyle(fontSize: 17.0,),)
                      ])
                  ):Text.rich(
                      TextSpan(text: "",style: TextStyle(color: Colors.white54),children: [
                        TextSpan(text: "First   ",style: TextStyle(fontSize: 17.0,),),
                        TextSpan(text: "    Second ",style: TextStyle(fontSize: 25.0,fontWeight: FontWeight.bold),)
                      ])
                  ),
                );
              })),
        ),

score 2 · Accepted Answer · answered Jan 09 '21 at 08:07

There could be a better option by using pageview.builder() but if you want to make change in this code then simply use recognizer property of TextSpan.

SwiperCustomPagination(builder:
                  (BuildContext context, SwiperPluginConfig config) {
                return Container(
                  padding: EdgeInsets.only(bottom: 10),
                  child: config.activeIndex==0?Text.rich(
                      TextSpan(text: "",style: TextStyle(color: Colors.white54),children: [
                        TextSpan(text: "First   ",style: TextStyle(fontSize: 25.0,fontWeight: FontWeight.bold),),
                        TextSpan(
                          text: "   Second ",
                          recognizer: TapGestureRecognizer()..onTap=(){swiperController.next();},
                          
                          //added recognizer over here
                          
                          style: TextStyle(fontSize: 17.0,),)
                      ])
                  ):Text.rich(
                      TextSpan(text: "",style: TextStyle(color: Colors.white54),children: [
                        TextSpan(
                          text: "First   ",
                          recognizer: TapGestureRecognizer()..onTap=(){swiperController.next();},
                          
                          //added recognizer over here
                          
                          style: TextStyle(fontSize: 17.0,),
                        ),
                        TextSpan(text: "    Second ",style: TextStyle(fontSize: 25.0,fontWeight: FontWeight.bold),)
                      ])
                  ),
                );
              })

edit pagination in flutter swiper

1 Answers1