The Flutter Parallax Swiper UI Challenge showcases a dynamic parallax swiper widget, designed to elevate your user interface experiences. This widget allows you to create a horizontal swiper that displays a list of images with captivating parallax scrolling effects. Customize its behavior by providing image URLs, enabling drag-to-scroll, setting viewport fractions, adjusting padding, controlling the parallax factor, and toggling foreground fading and background zoom.
Flutter.Parallax.Swiper.mov
Using ParallaxSwiper
with Default Values (Foreground Fading and Background Zoom Enabled):
ParallaxSwiper(
images: [
'image_url_1.jpg',
'image_url_2.jpg',
'image_url_3.jpg',
],
)
Using ParallaxSwiper
with No Foreground Fading and No Background Zoom:
ParallaxSwiper(
images: [
'image_url_1.jpg',
'image_url_2.jpg',
'image_url_3.jpg',
],
dragToScroll: true,
viewPortFraction: 0.85,
padding: EdgeInsets.all(16.0),
parallaxFactor: 10.0,
foregroundFadeEnabled: false, // Disable foreground image fading.
backgroundZoomEnabled: false, // Disable background image zooming.
)
ParallaxSwiper(
images: [
'image_url_1.jpg',
'image_url_2.jpg',
'image_url_3.jpg',
],
dragToScroll: true,
viewPortFraction: 0.85,
padding: EdgeInsets.all(16.0),
parallaxFactor: 10.0,
foregroundFadeEnabled: true,
backgroundZoomEnabled: true,
)
images (List<String>)
: The list of image URLs to display.dragToScroll (bool)
: Enable or disable drag-to-scroll functionality.viewPortFraction (double)
: Set the viewport fraction for image display.padding (EdgeInsets)
: Define padding for the swiper.parallaxFactor (double)
: Adjust the parallax factor to control scrolling effects.foregroundFadeEnabled (bool)
: Toggle foreground image fading.backgroundZoomEnabled (bool)
: Toggle background image zoom.
Contributions are welcome! If you encounter any issues or have suggestions for improvements, please feel free to create a pull request.
The Flutter Parallax Swiper UI Challenge is released under the MIT License. See LICENSE for details.