Image slider in flutter swiper library
Image slider in flutter swiper library
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.

Flutter Swiper Example

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

swiper flutter

 

 

 

 

 

//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 swiper 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 tinder swiper

 

 

 

 

//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 swipe animation

//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