flexi_image_slider
Image slider with auto scroll, dots indicator
Features
- set image with your aspect ratio
- auto scroll option
Installation
In your pubspec.yaml
file within your Flutter Project:
dependencies:
flexi_image_slider: 1.0.8
Usage
//required fields
aspectRatio: set you slider height like 1.0,1.5,2.0 etc...
arrayImages: pass your List<String> type array which contains image urls
//optional fields ------------
autoScroll: auto scroll enable disable by set true/false here
viewportFraction: set its value between 0.5 to 0.9 for display left & right side image preview
boxFit: set your image content mode
indicatorPosition: set indicator position like none,over slider or display at bottom of slider
indicatorAlignment: where you want to set your slider like left,right or center
duration: set your slider image changed speed by setting duration
indicatorActiveColor: set active color for indicator,
indicatorActiveColor: set deactive color for indicator,
borderRadius: set any double value for give radius to your image
onTap : want to execute some action on image click use this
//import package
import 'package:flexi_image_slider/flexi_image_slider.dart';
flexi_image_slider(
//required fields ---------
context: context,
aspectRatio: 16/14,
arrayImages: arrayImages,
//optional fields ------------
autoScroll: true,
viewportFraction: 0.8,
boxFit: BoxFit.fill,
indicatorPosition: IndicatorPosition.overImage,//IndicatorPosition.afterImage,IndicatorPosition.overImage,IndicatorPosition.none
indicatorAlignment: IndicatorAlignment.left,//IndicatorAlignment.left,IndicatorAlignment.right,IndicatorAlignment.center
duration: const Duration(seconds: 4),
indicatorActiveColor: Colors.blue,
indicatorDeactiveColor: Colors.grey,
borderRadius: 0,
onTap: (int index){
print("$index index clicked");
//handle your click events
},
),
NOTE: Images used only for demo purpose
Libraries
- flexi_image_slider
- Support for doing something awesome.