VxSwiper

VelocityX gives you VxSwiper - A simple yet flexible way to add carousel view in your application.

important

Video Tutorial

Features

  • Auto Play
  • Infinite Scroll
  • Fast Scrolling
  • Custom child widgets
  • With extension method

Above is a sample of what it looks like

Using VxSwiper

VxSwiper(
items: [1,2,3,4,5].map((index) {
return "Item $index".text.white.make()
.box.rounded.alignCenter.color(Vx.randomOpaqueColor).make()
.p4();
}).toList());
)

Using VxSwiper Builder

note

This method will save memory by building items once it becomes necessary. This way they won't be built if they're not currently meant to be visible on screen. It can be used to build different child item widgets related to content or by item index.

VxSwiper.builder(
itemCount: 10,
height: 400,
itemBuilder: (context, index) {
return "Item $index".text.white.make()
.box.rounded.alignCenter.color(Vx.randomOpaqueColor).make()
.p4();
},
)

Params

VxSwiper.builder(
itemCount: 10,
height: 400,
aspectRatio: 16/9,
viewportFraction: 0.8,
initialPage: 0,
enableInfiniteScroll: true,
reverse: false,
autoPlay: true,
autoPlayInterval: Duration(seconds: 3),
autoPlayAnimationDuration: Duration(milliseconds: 800),
autoPlayCurve: Curves.fastOutSlowIn,
enlargeCenterPage: true,
isFastScrollingEnabled: false,
onPageChanged: callbackFunction,
scrollDirection: Axis.horizontal,
itemBuilder: (context, index) {
return "Item $index".text.white.make()
.box.rounded.alignCenter.color(Vx.randomOpaqueColor).make()
.p4();
},
)
caution

If you pass the height parameter, the aspectRatio parameter will be ignored.

Using extension method .swiper()

List.generate(50,
(index) => "Item $index".text.white.make()
.box.rounded.alignCenter.color(Vx.randomOpaqueColor).make()
.p4())
.swiper(
height: context.isMobile ? 200 : 400,
enlargeCenterPage: true,
onPageChanged: (index) {
print(index);
},
isFastScrollingEnabled: true,
scrollDirection:
context.isMobile ? Axis.horizontal : Axis.horizontal)

Properties

Prop (Type)DefaultDescription
height (double)0Set carousel height and overrides any existing aspectRatio
aspectRatio (double)16/9Aspect ratio is used if no height have been declared.
viewportFraction (double)0.8The fraction of the viewport that each page should occupy.
initialPage (int)0The initial page to show when first creating the VxSwiper
realPage (int)10000The actual index of the PageView
enableInfiniteScroll (bool)trueDetermines if swiper should loop infinitely or be limited to item length
reverse (bool)falseReverse the order of items if set to true.
autoPlay (bool)falseEnables auto play, sliding one page at a time.
autoPlayInterval (Duration)Duration(seconds: 5)Sets Duration to determent the frequency of slides
autoPlayAnimationDuration (Duration)Duration(milliseconds: 800)The animation duration between two transitioning pages while in auto playback
autoPlayCurve (Curve)Curves.fastOutSlowInDetermines the animation curve physics.
pauseAutoPlayOnTouch (Duration)-Sets a timer on touch detected that pause the auto play with given duration
enlargeCenterPage (bool)falseDetermines if current page should be larger then the side images
onPageChanged (Function(int))-Called whenever the page in the center of the viewport changes
scrollPhysics (ScrollPhysics)-The physics for scrolling. Default to clamp if fast scrolling enabled
isFastScrollingEnabled (bool)falseisFastScrollingEnabled can be used to scrolling fast the PageView
scrollDirection (Axis)Axis.horizontalhe axis along which the page view scrolls.
Edit this page