Fancy Swipeable Animation in Flutter

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

🎥 Video Tutorial

🛠️ Dependencies

flutter_swiper_view | Flutter Package

🔭 Implementation

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);

  @override
  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:👉 https://www.youtube.com/watch?v=exFXtQ36xvg

Get the complete source code here:👉 https://github.com/vijayinyoutube/swipable_animation_app

Check out all my Flutter related blogs here.,👇

vijaycreations

Other articles you may like.,

🔵Setting up your Flutter app for publishing in Play Store.

🟤Async Programming in Dart

🟡Scratch Card in Flutter

🔴Confetti Animation in Flutter

🟢 Google Fonts in Flutter app

🔴 Image Picker in Flutter

🟡 Change App Launcher Icon in Flutter

🟤 Neon Lighting in Flutter

🔵 Image Filter in Flutter

🟣 Enabling Flutter Web

🟠 Animated Icons in Flutter

🟢 Best VSCode Extensions

🔴 AnimatedContainer Widget in Flutter

🟡 GradientText in Flutter

🟤 Custom Clipper in Flutter

🔵 Carousel Slider in Flutter

🟣 Flutter BLoC Pattern

Most popular

Encrypted QR Code generation using Flutter — AES Encryption

Shared Preferences in Flutter

Setting up your Flutter app for publishing in Play Store.

Creating Desktop Apps using Flutter

Flutter Tutorials

If you found this article useful and wish to support my work, you can consider buying me a ☕️ coffee.👇

Pay Vijay R using PayPal.Me

If you want to know more about Flutter and various Widgets in Flutter…?🤓 Then visit my channel 👉🏻 vijaycreations🚩

Thanks.,