Flutter Swiper: A Versatile Slider Widget for Your Flutter Projects

Published on by Flutter News Hub

Flutter Swiper: A Versatile Slider Widget for Your Flutter Projects

Flutter Swiper is a highly customizable and feature-rich slider widget for Flutter apps. It offers multiple layout options, infinite looping, and various customization options to create stunning and interactive sliders.

Getting Started

To use Flutter Swiper, add the following dependency to your pubspec.yaml file:

dependencies:
  flutter_swiper: ^latest_version

Import the package in your Dart file:

import 'package:flutter_swiper/flutter_swiper.dart';

Basic Usage

Here's a basic example of a horizontal slider with 3 images:

Swiper(
  itemBuilder: (context, index) {
    return Image.network("image_url");
  },
  itemCount: 3,
  pagination: SwiperPagination(),
  control: SwiperControl(),
)

Customizable Options

Flutter Swiper provides a wide range of customization options to tailor the slider to your specific needs:

Constructor Options:

  • scrollDirection: Axis to scroll along (horizontal or vertical)
  • loop: Enable or disable continuous looping
  • index: Initial index of the slider
  • autoplay: Enable or disable autoplay
  • autoplayDelay: Delay in milliseconds between autoplay transitions
  • autoplayDisableOnInteraction: Disable autoplay when user interacts with the slider
  • duration: Duration of the transition animation
  • pagination: SwiperPagination instance for customization
  • control: SwiperControl instance for customization

Pagination Options:

  • alignment: Alignment of the pagination dots
  • margin: Margin around the pagination dots
  • builder: Custom builder for pagination dots

Control Button Options:

  • iconPrevious: Icon for the previous button
  • iconNext: Icon for the next button
  • color: Color of the control buttons
  • size: Size of the control buttons
  • padding: Padding around the control buttons

Controller Options:

  • move: Move to a specific index
  • next: Move to the next slide
  • previous: Move to the previous slide
  • startAutoplay: Start autoplay
  • stopAutoplay: Stop autoplay

Example: Custom Animation

To create a custom animation, use the CustomLayout option:

Swiper(
  layout: SwiperLayout.CUSTOM,
  customLayoutOption: CustomLayoutOption(
    startIndex: -1,
    stateCount: 3,
  ).addRotate([-45.0/180, 0.0, 45.0/180]).addTranslate([
    Offset(-370.0, -40.0),
    Offset(0.0, 0.0),
    Offset(370.0, -40.0)
  ]),
  itemWidth: 300.0,
  itemHeight: 200.0,
  itemBuilder: (context, index) {
    return Container(
      color: Colors.grey,
      child: Center(
        child: Text("$index"),
      ),
    );
  },
  itemCount: 10,
)

Layouts

Flutter Swiper supports multiple layouts to accommodate different UI requirements:

  • DEFAULT: Horizontal scrolling
  • STACK: Stacked items
  • TINDER: Tinder-like swipe animation
  • CUSTOM: Define your own custom animation

Conclusion

Flutter Swiper is a powerful and versatile slider widget that enhances the user experience of your Flutter apps. With its extensive customization options and multiple layouts, you can create visually appealing and interactive sliders with ease.

Flutter News Hub