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](https://flutternewshub.com/storage/images/posts/01HQMGRT27T9BMCVSFXZDDZYFW.webp)
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.