Swiper In Flutter
In this article, we will explore the Swiper in flutter using the fluter_swiper_package. With the help of the package, we can easily achieve flutter animated Swiper. So let’s get started.
We will implement a demo of the Swiper that can be easily embedded in your flutter applications.
flutter_swiper | Flutter Package
中文说明 The best swiper for flutter , with multiple layouts, infinite loop. Compatible with Android & iOS. We are using…pub.dev
Table Of Contents :
Swiper :
Swiper flutter has a touch slider plugin using which a user can slide any view like an image slider. Using the swiper library we can use different types of layouts. This library is compatible with both android and ios.
Some Basic Properties:
- scrollDirection: The scroll direction property is to give the direction of the scroll that we can scroll the list in the vertical or horizontal direction.
- autoplay: We use the autoplay property when we have to move one of the lists, it is of type bool.
- physics: We use the Physics property to do scrolling. It determines when the user reaches the maximum scroll limit or stops scrolling.
- controller: The controller is used to control the index of the swiper, start or stop autoplay.
- index: The index property is the index number of the initial slide that initiates the slide and updates the previous index.
- loop: We can use the loop property to continuously rotate the list
Demo Module :
Implementation :
Step 1: Add the dependencies
Add dependencies to pubspec — yaml file.
dependencies :
flutter_swiper: ^1.1.6
Step 2: Importing
import 'package:flutter_swiper/flutter_swiper.dart';
Step 3: Run flutter package get
Code Implementation :
Create a new dart file called home_page.dart inside the lib folder.
First of all, we have created a home page screen in which four buttons have been created and at the click of each button, a new page will open in which we have shown the swiper list in different ways.
Default Swiper :
In the default swiper, we have listed an image and used the default layout in the swiper class whose scroll direction is horizontal. Let us understand this in detail with the help of a reference.
Swiper(
scrollDirection:Axis.horizontal,
itemBuilder:(BuildContext context, int index) {
return _buildSwiperList(imageModel[index],index);
},
itemCount: imageModel.length,
// pagination: new SwiperPagination(),
layout: SwiperLayout.DEFAULT,
),
When we run the application, we ought to get the screen’s output like the underneath screen capture.
Stack Swiper :
In the stack swiper, we have listed an image and used the stack layout in the swiper class in which the items are positioned on top of each other which allows the items to overlap and render them from bottom to top. Let us understand this in detail with the help of a reference.
Swiper(
itemBuilder:(BuildContext context, int index) {
return _buildSwiperList(imageModel[index],index);
},
itemCount: imageModel.length,
itemWidth:DeviceSize.width(context),
layout: SwiperLayout.STACK,
),
When we run the application, we ought to get the screen’s output like the underneath screen capture.
Tinder Swiper :
In tinder swiper, we have listed an image and used the Tinder layout in the swiper class in which the item is positioned on top of each other which swaps the item very quickly. Let us understand this in detail with the help of a reference.
Swiper(
itemBuilder:(BuildContext context, int index) {
return _buildSwiperList(imageModel[index],index);
},
itemWidth:DeviceSize.width(context),
itemHeight:DeviceSize.height(context)/3,
itemCount: imageModel.length,
layout: SwiperLayout.TINDER,
// control:SwiperControl(),
),
When we run the application, we ought to get the screen’s output like the underneath screen capture.
Pagination Swiper :
In this screen, we have used the pagination property, in which a list of an image whose layout property is of custom type has used animation in its custom layout option. Let us understand this in detail with the help of a reference.
Swiper(
itemBuilder: (BuildContext context, int index) {
return _buildSwiperList(imageModel[index], index);
},
itemWidth: DeviceSize.width(context),
itemHeight: DeviceSize.height(context) / 3,
itemCount: imageModel.length,
layout: SwiperLayout.CUSTOM,
pagination: SwiperPagination(),
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)
]),
// control:SwiperControl(),
),
When we run the application, we ought to get the screen’s output like the underneath screen capture.
Code File :
import 'package:flutter/material.dart';
import 'package:flutter_swiper/flutter_swiper.dart';
import 'package:flutter_swiper_demo/Constants/Constants.dart';
import 'package:flutter_swiper_demo/modal/image_model.dart';
import 'package:flutter_swiper_demo/themes/device_size.dart';
class CustomSwiperPagination extends StatefulWidget {
@override
_CustomSwiperPaginationState createState() => _CustomSwiperPaginationState();
}
class _CustomSwiperPaginationState extends State<CustomSwiperPagination> {
List<ImageModel> imageModel;
@override
void initState() {
imageModel = Constants.getImageModel();
super.initState();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Swiper Pagination'),
),
body: Center(
child: Container(
height: DeviceSize.height(context) / 3,
width: DeviceSize.width(context),
alignment: Alignment.center,
child: Swiper(
itemBuilder: (BuildContext context, int index) {
return _buildSwiperList(imageModel[index], index);
},
itemWidth: DeviceSize.width(context),
itemHeight: DeviceSize.height(context) / 3,
itemCount: imageModel.length,
layout: SwiperLayout.CUSTOM,
pagination: SwiperPagination(),
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)
]),
// control:SwiperControl(),
),
),
),
);
}
Widget _buildSwiperList(ImageModel items, int index) {
return Container(
margin: EdgeInsets.only(left: 15, right: 15),
height: DeviceSize.height(context) / 6,
child: ClipRRect(
borderRadius: BorderRadius.all(Radius.circular(10)),
child: Image.asset(
items.img,
fit: BoxFit.fill,
),
),
);
}
}
Conclusion :
In this article, I have explained a Swiper in a flutter, which you can modify and experiment with according to your own, this little introduction was from the swiper demo from our side.
I hope this blog will provide you with sufficient information in Trying up the Percent Indicator in your flutter project. We will show you the swiper is?, and work on it in your flutter applications, So please try it.
❤ ❤ Thanks for reading this article ❤❤
If I got something wrong? Let me know in the comments. I would love to improve.
Clap 👏 If this article helps you.
Feel free to connect with us
And read more articles from FlutterDevs.com.
FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire a flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter-related queries.
We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.
