flutter swiper
the best swiper for flutter , with multiple layouts, infinite loop. compatible with android & ios.
new features: pagetransformer
finally, we have pagetransformer
like android, just set a transformer
to swiper
, it returns a widget that has been transformed. for now, only support for layout default
. thanks to @flutterrocks, you’ve done a great job.
we are now using this project transformer_page_view.
new features: layout
showcases
installation
add
flutter_swiper : ^lastest_version
to your pubspec.yaml ,and run
flutter packages get
in your project’s root directory.
basic usage
create a new project with command
flutter create myapp
edit lib/main.dart like this:
import 'package:flutter/material.dart';
import 'package:flutter_swiper/flutter_swiper.dart';
void main() => runapp(new myapp());
class myapp extends statelesswidget {
@override
widget build(buildcontext context) {
return new materialapp(
title: 'flutter demo',
theme: new themedata(
primaryswatch: colors.blue,
),
home: new myhomepage(title: 'flutter demo home page'),
);
}
}
class myhomepage extends statefulwidget {
myhomepage({key key, this.title}) : super(key: key);
final string title;
@override
_myhomepagestate createstate() => new _myhomepagestate();
}
class _myhomepagestate extends state<myhomepage> {
@override
widget build(buildcontext context) {
return new scaffold(
appbar: new appbar(
title: new text(widget.title),
),
body: new swiper(
itembuilder: (buildcontext context,int index){
return new image.network("http://via.placeholder.com/350x150",fit: boxfit.fill,);
},
itemcount: 3,
pagination: new swiperpagination(),
control: new swipercontrol(),
),
);
}
}
constructor
basic
parameter | default | description |
---|---|---|
scrolldirection | axis.horizontal | if axis.horizontal , the scroll view’s children are arranged horizontally in a row instead of vertically in a column. |
loop | true | set to false to disable continuous loop mode. |
index | 0 | index number of initial slide. |
autoplay | false | set to true enable auto play mode. |
onindexchanged | void onindexchanged(int index) | called with the new index when the user swiped or autoplay |
ontap | void ontap(int index) | called when user tap ui. |
duration | 300.0 | the milliscends of every transaction animation costs |
pagination | null | set new swiperpagination() to show default pagination |
control | null | set new swipercontrol() to show default control buttons |
pagination
the pagination extends from swiperplugin
,the swiperplugin
provides extra ui for swiper
.set new swiperpagination()
to show default pagination.
parameter | default | description |
---|---|---|
alignment | alignment.bottomcenter | change this value if you what to put pagination in other place |
margin | const edgeinsets.all(10.0) | the distance between inner side of the parent container. |
builder | swiperpagination.dots | there are two default styles swiperpagination.dots and swiperpagination.fraction ,both can be customized. |
if you’d like to customize your own pagination, you can do like this:
new swiper(
...,
pagination:new swipercustompagination(
builder:(buildcontext context, swiperpluginconfig config){
return new yourownpaginatipon();
}
)
);
control buttons
the control also extends from swiperplugin
,set new swipercontrol()
to show default control buttons.
parameter | default | description |
---|---|---|
iconprevious | icons.arrow_back_ios | the icon data to display previous control button |
iconnext | icons.arrow_forward_ios | the icon data to display next . |
color | theme.of(context).primarycolor | control button color |
size | 30.0 | control button size |
padding | const edgeinsets.all(5.0) | control button padding |
controller
the controller
is used to control the index
of the swiper, start or stop autoplay.you can create a controller by new swipercontroller()
and save the instance by futher usage.
method | description |
---|---|
void move(int index, {bool animation: true}) | move to the spicified index ,with animation or not |
void next({bool animation: true}) | move to next |
void previous({bool animation: true}) | move to previous |
void startautoplay() | start autoplay |
void stopautoplay() | stop autoplay |
autoplay
parameter | default | description |
---|---|---|
autoplaydelay | 3000 | autoplay delay milliseconds. |
autoplaydisableoninteraction | true | if set true, autoplay is disabled when use swipes. |
build in layouts
new swiper(
itembuilder: (buildcontext context, int index) {
return new image.network(
"http://via.placeholder.com/288x188",
fit: boxfit.fill,
);
},
itemcount: 10,
viewportfraction: 0.8,
scale: 0.9,
)
new swiper(
itembuilder: (buildcontext context, int index) {
return new image.network(
"http://via.placeholder.com/288x188",
fit: boxfit.fill,
);
},
itemcount: 10,
itemwidth: 300.0,
layout: swiperlayout.stack,
)
new swiper(
itembuilder: (buildcontext context, int index) {
return new image.network(
"http://via.placeholder.com/288x188",
fit: boxfit.fill,
);
},
itemcount: 10,
itemwidth: 300.0,
itemheight: 400.0,
layout: swiperlayout.tinder,
)
very easy to create you own custom animation:
new swiper(
layout: swiperlayout.custom,
customlayoutoption: new customlayoutoption(
startindex: -1,
statecount: 3
).addrotate([
-45.0/180,
0.0,
45.0/180
]).addtranslate([
new offset(-370.0, -40.0),
new offset(0.0, 0.0),
new offset(370.0, -40.0)
]),
itemwidth: 300.0,
itemheight: 200.0,
itembuilder: (context, index) {
return new container(
color: colors.grey,
child: new center(
child: new text("$index"),
),
);
},
itemcount: 10)
the customlayoutoption
is designed to describe animations.
it is very easy to specify every state of items in swiper.
new customlayoutoption(
startindex: -1, /// which index is the first item of array below
statecount: 3 /// array length
).addrotate([ // rotation of every item
-45.0/180,
0.0,
45.0/180
]).addtranslate([ /// offset of every item
new offset(-370.0, -40.0),
new offset(0.0, 0.0),
new offset(370.0, -40.0)
])
codes
new constrainedbox(
child: new swiper(
outer:false,
itembuilder: (c, i) {
return new wrap(
runspacing: 6.0,
children: [0,1,2,3,4,5,6,7,8,9].map((i){
return new sizedbox(
width: mediaquery.of(context).size.width/5,
child: new column(
mainaxissize: mainaxissize.min,
children: <widget>[
new sizedbox(
child: new container(
child: new image.network("https://fuss10.elemecdn.com/c/db/d20d49e5029281b9b73db1c5ec6f9jpeg.jpeg%3fimagemogr/format/webp/thumbnail/!90x90r/gravity/center/crop/90x90"),
),
height: mediaquery.of(context).size.width * 0.12,
width: mediaquery.of(context).size.width * 0.12,
),
new padding(padding: new edgeinsets.only(top:6.0),child: new text("$i"),)
],
),
);
}).tolist(),
);
},
pagination: new swiperpagination(
margin: new edgeinsets.all(5.0)
),
itemcount: 10,
),
constraints:new boxconstraints.loose(new size(screenwidth, 170.0))
),
Comments are closed.