Hi Guys, Welcome to Proto Coders Point, In this Flutter tutorial we will discuss on flutter swiper Library
What is flutter swiper? how to implement swiper in flutter?
A Swiper in simple words is a modern touch slider using which user of mobile application can slide any view like image Slider.
Swiper is been used on websites and mobile applications.
In Flutter there is a best library to integrate Swiper, with can be customized with multiple layouts and infinite loop, and as said in official library site that is compatible with Both Android and iOS.
Let’s begin implementation of this flutter library.
Installation of dependencies
Add library in pubspec.yaml file
dependencies: flutter_swiper: ^1.1.6 #add this line
After adding hit pub get button
Importing it where required
import 'package:flutter_swiper/flutter_swiper.dart';
so now you can implement swiper widgets in your flutter project.
Widgets Snippets Code With Outputs
#DEFAULT
//flutter Swipper default
Container(
height: 200,
width: MediaQuery.of(context).size.width/2-2,
child: new Swiper(
itemBuilder: (BuildContext context, int index) {
return new Image.network(
imagedatamodel[index].postphoto,
fit: BoxFit.fill,
);
},
itemCount: imagedatamodel.length,
itemWidth: 300.0,
layout: SwiperLayout.DEFAULT,
),
),
#STACK
//flutter Swipper Stack
Container(
height: 200,
width: MediaQuery.of(context).size.width/2,
child: new Swiper(
itemBuilder: (BuildContext context, int index) {
return new Image.network(
imagedatamodel[index].profilepic,
fit: BoxFit.fill,
);
},
itemCount: imagedatamodel.length,
itemWidth: 300.0,
layout: SwiperLayout.STACK,
),
),
#TINDER
//flutter Swipper Tinder
Swiper(
itemBuilder: (BuildContext context, int index) {
return new Image.network(
imagedatamodel[index].profilepic,
fit: BoxFit.fill,
);
},
itemCount: imagedatamodel.length,
itemWidth: 200.0,
itemHeight: 200.0,
layout: SwiperLayout.TINDER,
),
#CUSTOM WITH ANIMATION
flutter swipe animation – flutter swiper custom pagination
//flutter swiper with custom animation
Swiper(
layout: SwiperLayout.CUSTOM,
customLayoutOption: new CustomLayoutOption(
startIndex: -1,
stateCount: 3
).addRotate([
-45.0/180,
0.0,
45.0/180
]).addTranslate([
new Offset(-340.0, -40.0),
new Offset(0.0, 0.0),
new Offset(340.0, -40.0)
]),
itemWidth: 300.0,
itemHeight: 200.0,
itemBuilder: (context, index) {
return new Container(
color: Colors.blue[400],
child: new Center(
child: new Text("$index",style: TextStyle(color: Colors.black,fontSize: 20),),
),
);
},
itemCount: 10),
Complete Code Swiper in Flutter
just copy the below code and paste in main.dart of you flutter for testing the working of this library
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_swiper/flutter_swiper.dart';
import 'Image_DataModel.dart';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Flutter Demo',
theme: new ThemeData(
primaryColor: Colors.blue,
),
home: new MyHomePage(title: 'Flutter Swiper Example'),
debugShowCheckedModeBanner: false,
);
}
}
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: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: [
SizedBox(
height:5
),
Row(
mainAxisAlignment: MainAxisAlignment.start,
children: [
//flutter Swipper default
Container(
height: 200,
width: MediaQuery.of(context).size.width/2-2,
child: new Swiper(
itemBuilder: (BuildContext context, int index) {
return new Image.network(
imagedatamodel[index].postphoto,
fit: BoxFit.fill,
);
},
itemCount: imagedatamodel.length,
itemWidth: 300.0,
layout: SwiperLayout.DEFAULT,
),
),
SizedBox(width: 2,),
//flutter Swipper Stack
Container(
height: 200,
width: MediaQuery.of(context).size.width/2,
child: new Swiper(
itemBuilder: (BuildContext context, int index) {
return new Image.network(
imagedatamodel[index].profilepic,
fit: BoxFit.fill,
);
},
itemCount: imagedatamodel.length,
itemWidth: 300.0,
layout: SwiperLayout.STACK,
),
),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Text("Swiper Default",style: TextStyle(fontSize: 15),),
Text("Swiper Stack",style: TextStyle(fontSize: 15),)
],
),
//flutter swiper with custom animation
Swiper(
layout: SwiperLayout.CUSTOM,
customLayoutOption: new CustomLayoutOption(
startIndex: -1,
stateCount: 3
).addRotate([
-45.0/180,
0.0,
45.0/180
]).addTranslate([
new Offset(-340.0, -40.0),
new Offset(0.0, 0.0),
new Offset(340.0, -40.0)
]),
itemWidth: 300.0,
itemHeight: 200.0,
itemBuilder: (context, index) {
return new Container(
color: Colors.blue[400],
child: new Center(
child: new Text("$index",style: TextStyle(color: Colors.black,fontSize: 20),),
),
);
},
itemCount: 10),
Center(child: Text("Swiper with Custom Swipe Animation"),),
//flutter Swipper Tinder
Swiper(
itemBuilder: (BuildContext context, int index) {
return new Image.network(
imagedatamodel[index].profilepic,
fit: BoxFit.fill,
);
},
itemCount: imagedatamodel.length,
itemWidth: 200.0,
itemHeight: 200.0,
layout: SwiperLayout.TINDER,
),
Center(
child: Text("Swiper Tinder",style: TextStyle(fontSize: 15),),
),
],
),
);
}
}
Constructor of this library
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 |
Check out official Site to study in details here https://pub.dev/packages/flutter_swiper
