Flutterexperts

VelocityX is really a great UI tool. It provides us hundreds of new cool features that we can use in our development. VelocityX makes our UI 40% faster in a much easier manner. It has some great widgets, we call them SuperVx with many properties. VxSwiper, VxAnimator, VxPlatform, VxToast, VxStepper, VxRating are SuperVx that helps us to do certain things faster and easier manner. In this blog, we shall discuss about VxSwiper and learn how to implement it.

---

Table of content :

Install package

VxSwipper

VxSwiper.builder

Using extension method .swiper()

Properties of Swiper

Conclusion

---

Install package:

velocity_x | Flutter Package
VelocityX is a 100% free Flutter open-source minimalist UI Framework built with Flutter SDK to make Flutter development…pub.dev

dependencies:
   velocity_x: ^2.6.0

VxSwipper:

We can directly use VxSwiper to implement it, it has several properties and takes a list of items i.e. list of widgets. We have used map method. A list of String is given and then its data is mapped with text.

You can notice that I have written text in a different manner. VelocityX provides this method to pass text as a child or widget. We can directly write the text string and then make it as text. Using VleocityX we can easily pass color, fontSize, fontWeight, padding, and many more properties very easily.

List<String> list = ["A", "B", "C", "D", "E"];
VxSwiper(
    height: 200,
    scrollDirection: Axis.horizontal,
    scrollPhysics: BouncingScrollPhysics(),
    autoPlay: true,
    reverse: false,
    pauseAutoPlayOnTouch: Duration(seconds: 3),
    initialPage: 0,
    isFastScrollingEnabled: true,
    enlargeCenterPage: true,
    onPageChanged: (value) {
      print(value);
    },
    autoPlayCurve: Curves.elasticOut,
    items: list
        .map((e) => e.text
            .makeCentered()
            .box
            .withRounded(value: 5)
            .coolGray600
            .make()
            .p12())
        .toList()),

VxSwiper.builder:

This widget is used when the length of. It also has similar properties. builder returns a widget for each iteration.

VxSwiper.builder(
  enableInfiniteScroll: true,
  reverse: false,
  height: 400,
  viewportFraction: 0.8,
  initialPage: 0,
  autoPlay: true,
  autoPlayInterval: Duration(seconds: 1),
  autoPlayAnimationDuration: Duration(milliseconds: 500),
  autoPlayCurve: Curves.easeIn,
  enlargeCenterPage: true,
  onPageChanged: (value) {},
  scrollDirection: Axis.vertical,
  itemCount: list.length,
  itemBuilder: (context, index) {
    return list[index]
        .text
        .white
        .make()
        .box
        .rounded
        .alignCenter
        .color(Vx.blueGray700)
        .make()
        .p4();
  },
)

Using extension method .swiper():

List.generate(
    list.length,
    (index) => list[index]
        .text
        .white
        .make()
        .box
        .rounded
        .alignCenter
        .color(Vx.coolGray500)
        .make()
        .p4()).swiper(
    height: context.isMobile ? 200 : 400,
    enlargeCenterPage: true,
    autoPlay: true,
    autoPlayCurve: Curves.easeIn,
    onPageChanged: (index) {
      print(index);
    },
    isFastScrollingEnabled: true,
    scrollDirection: Axis.horizontal)

---

Properties of Swiper:

1. height: Its default value is 0
2. aspectRatio : Its default value is 16/9
3. viewportFraction : 0.8 is the default value and it is the fraction of the viewport that each page should occupy.
4. initialPage: It takes the index of the initial page. Its default value is 0.
5. realPage: It is the actual index of the PageView .
6. enableInfiniteScroll: It is the bool value that determines whether the swiper should loop infinitely or not.
7. reverse: It reverses the order of items.
8. autoPlay: It slides the page one by one.
9. autoPlayInterval: It is the frequency of slides.
10. autoPlayAnimationDuration: It is animation duration between two transitioning pages while they are in auto playback.
11. autoPlayCurve: It is the animation curve.
12. pauseAutoPlayOnTouch: It pauses the autoplay on touch.
13. enlargeCenterPage: it enlarges the current page.
14. onPageChanged: It is called when the page viewport changes.
15. scrollPhysics: It is the physics of scrolling.
16. isFastScrollingEnabled: It scrolls faster.
17. scrollDirection: It is the direction of scrolling of pages.

Conclusion :

In the article, I have explained the basic type widget of a VelocityX Swiper. you can modify this code according to your choice. This was a small introduction to VelocityX SwiperX On User Interaction from my side, and it’s working using Flutter.

I hope this blog will provide you with sufficient information in Trying up VelocityX VxSwiper in your flutter projects. This demo program uses velocity_x packages in a flutter and shows how a swiper will work in your flutter applications. So please try it.

🌸🌼🌸 Thank you for reading. 🌸🌼🌸🌼

---

Feel free to connect with us:
And read more articles from FlutterDevs.com

FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire a flutter developer for your cross-platform Flutter mobile app 987tr project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter-related queries.

We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences!.