flexi_productimage_slider

Description:

flexi productimage slider

flexi_productimage_slider #
An image slider to represents your products..:)
Features #

Slide your products with thumbnail
set your thumbnail in any shapes, color, corner radius, size , alignment etc. as per your requirements
perform your action on click on image

























Installation #
In your pubspec.yaml file within your Flutter Project:
dependencies:
flexi_productimage_slider: 1.1.0
copied to clipboard

import 'package:flexi_productimage_slider/flexi_productimage_slider.dart';

flexiProductimageSlider(

//required fields
arrayImages: const [
"https://i.ibb.co/ZLFHX3F/1.png",
"https://i.ibb.co/JKJvs5S/2.png",
"https://i.ibb.co/LCzV7b3/3.png",
"https://i.ibb.co/L8JHn1L/4.png",
"https://i.ibb.co/7RWNCXH/5.png",
"https://i.ibb.co/bBsh5Pm/6.png",
],

// optional fields

//set where you want to set your thumbnail
sliderStyle: SliderStyle.nextToSlider,//.overSlider, .nextToSlider

// set you slider height like 1.0,1.5,2.0 etc...
aspectRatio: 0.8,

//set content mode of image
boxFit: BoxFit.cover,

//set this if you want to set any default image index when it loads
selectedImagePosition: 0,

//set your thumbnail alignment
thumbnailAlignment: ThumbnailAlignment.bottom,//.right , .left, .bottom

//set how selected thumbnail border displayed
thumbnailBorderType: ThumbnailBorderType.all,//.bottom, .all

//set selected thumbnail border width
thumbnailBorderWidth: 1.5,//double value

//set thumbnail corner radius
thumbnailBorderRadius: 10,

//set your thumbnail height & width
//NOTE : if you set ThumbnailShape.circle then set thumbnail width height same
thumbnailWidth: 50,
thumbnailHeight: 65,

//set color of current image thumbnail border
thumbnailBorderColor: Colors.blue,

//make you action when user click on image
onTap: (index){
print("selected index : $index");

//for zooming effect on click use gallery_zoom_slides
//https://pub.dev/packages/gallery_zoom_slides
Navigator.push(context, MaterialPageRoute(builder: (context)=>
galleryZoomSlides(
//required fields
arrayImages: arrayImages,

//Optional fields
zoomTheme: ZoomTheme.theme3,//.theme1, .theme2, .theme3
selectedImagePosition: index,
selectedThumbnailColor: Colors.blue,
)
)
);

},
),

...


copied to clipboard
NOTE : Images taken only for demo purpose