Published in


Fancy Swipeable Animation in Flutter

In this article we will discuss about how to create fancy swipeable animation in our Flutter app.

Will make use of the Swiper widget which we get as a result of the package installation. This Swiper widget will return the itembuilder containing any flutter widget (in our case it is going to be the container widget with the background image that holds the card number, icons etc.,)

class SwiperBuilder extends StatelessWidget {
const SwiperBuilder({
Key? key,
}) : super(key: key);

Widget build(BuildContext context) {
return Swiper(
itemWidth: 400,
itemHeight: 225,
loop: true,
duration: 1200,
scrollDirection: Axis.vertical,
itemBuilder: (context, index) {
return Container(
width: 400,
height: 400,
decoration: BoxDecoration(
image: DecorationImage(image: AssetImage(imagepath[index])),
borderRadius: BorderRadius.circular(20),
itemCount: imagepath.length,
layout: SwiperLayout.STACK,

We can customize this widget by providing the desired values for the parameters.

loop: bool — if we want to keep swiping the widgets endlessly we can set it as true (default)

layout : SwiperLayout.STACK — The widgets are placed one over the other just like stack widget.

scrollDirection: Axis.vertical — If we want top to bottom scroll or set it as Axis.horiz1ontal if we want carousel kind of swiping option.

There are plenty of other parameters we can play around and customize it based on our use-case.

Well that’s it. 🎉 Run the code to see it in action.🥳

Refer my video tutorial for complete guide:👉

Get the complete source code here:👉



A list of Flutter Tutorials and app templates

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Vijay R

Hai👋 I’m a flutter developer experienced in designing and developing stunning mobile apps. Reach out for freelance projects: