VelocityX Swiper Flutter Example
In this article, we are going to integrate VelocityX Swiper UI in flutter application. You can also check out flutter slider related articles.
To implement velocityx ui in our flutter app, we need to use velocity_x flutter package. This package provides various types of widgets like VxStepper, VxRating, VxAnimator, VxToast, VxSwiper, VxPlatform. In this flutter example, we are using VxSwiper widget to create slider effect with football player info cards.
VxSwiper widget has many different properties to customize UI. The most important property is items. Using this property, we can display our array data with swipe functionality. We can also set custom height of swiper UI using height property. If we want to swipe list in vertical direction then we need to set Axis.vertical to scrollDirection property otherwise value will be Axis.horizontal.
We can also add animation when ui is sliding using scrollPhysics property in VxSwiper widget. Here we use BouncingScrollPhysics widget to create bounce animation when ui is swiped. We can also decide items can be swiped infinitely or not using enableInfiniteScroll property.
UI can also be automatically slide using autoPlay property. We need to set duration using autoPlayInterval property to decide after which time UI is swiped automatically. We can also set this autoplay animation duration using autoPlayAnimationDuration property of VxSwiper widget.
If we give value true to reverse property then items will be swiped in reverse order. We can also display any page by default using initialPage property. We can also make scrolling effect faster by giving value true to isFastScrollingEnabled property. We can also detect when item is swiped using onPageChanged property.
Add required package in pubspec.yaml file
Add images paths in pubspec.yaml file
– images/ake.png
– images/debruyne.png
– images/dias.png
– images/ederson.png
– images/grealish.png
– images/jesus.png
– images/sterling.png
Create model class to handle data
String playerImg;
String playerName;
String playerCountry;
String playerPosition;
ManCityPlayerInfo(this.playerImg, this.playerName, this.playerCountry, this.playerPosition);
}
Add data to display in VelocityX Swiper
ManCityPlayerInfo(
“images/ake.png”,
“Nathan Aké”,
“Netherlands”,
“Centre Back”,
),
ManCityPlayerInfo(
“images/debruyne.png”,
“Kevin De Bruyne”,
“Belgium”,
“Attacking Midfield”,
),
ManCityPlayerInfo(
“images/dias.png”,
“Rúben Dias”,
“Portugal”,
“Centre Back”,
),
ManCityPlayerInfo(
“images/ederson.png”,
“Ederson”,
“Brazil”,
“Goalkeeper”,
),
ManCityPlayerInfo(
“images/grealish.png”,
“Jack Grealish”,
“England”,
“Left Winger”,
),
ManCityPlayerInfo(
“images/jesus.png”,
“Gabriel Jesus”,
“Brazil”,
“Centre Forward”,
),
ManCityPlayerInfo(
“images/sterling.png”,
“Raheem Sterling”,
“England”,
“Left Winger”,
),
];
Flutter VelocityX Swiper UI
appBar: AppBar(title: Text(‘Flutter VelocityX Swiper Sample’)),
body: Container(
margin: EdgeInsets.all(15),
child: Center(
child: VxSwiper(
initialPage: 0,
height: 500,
reverse: true,
autoPlay: true,
autoPlayCurve: Curves.elasticOut,
isFastScrollingEnabled: true,
scrollPhysics: BouncingScrollPhysics(),
scrollDirection: Axis.vertical,
pauseAutoPlayOnTouch: Duration(seconds: 3),
enlargeCenterPage: true,
onPageChanged: (value) {},
items: listManCityPlayerInfo
.map((item) => Card(
elevation: 5.0,
child: Padding(
padding: const EdgeInsets.all(15),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Image.asset(
item.playerImg,
width: 200,
height: 200,),
SizedBox(height: 50),
Text(item.playerName,
style: TextStyle(
color: Colors.orangeAccent,
fontSize: 25,
fontWeight: FontWeight.bold)),
SizedBox(height: 20),
Text(item.playerPosition + ” – ” + item.playerCountry,
style: TextStyle(
color: Colors.grey,
fontSize: 20,
fontWeight: FontWeight.bold)),
],
),
),
))
.toList(),
),
),
));
Pingback: Flutter Slidable Widget Example - CodingWithDhrumil
Pingback: Setting Intro Slider in Flutter Applications - CodingWithDhrumil
Pingback: Custom Switch Lite Flutter Example - CodingWithDhrumil