Logo

PRs Welcome pub package

card_swiper

Swiper/Carousel for flutter, with multiple layouts, infinite loop. Compatible with Android & iOS.

:sparkles::sparkles: New Features:Layout for pagination.

We are using this project flutter_page_indicator now .

:sparkles::sparkles: 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 great job 👏.

We are using this project transformer_page_view now .

:sparkles::sparkles: New Features:Layout

See More

Showcases

Horizontal

Vertical

Custom Pagination

Custom Pagination

Phone

Example

See More

Changelogs

see:CHANGELOG.md

Getting Started

Installation

Add

card_swiper : ^1.0.2

to your pubspec.yaml, and run

flutter packages get

in your project's root directory.

OR

run

flutter pub add card_swiper

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:card_swiper/card_swiper.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
    body: Swiper(
        itemBuilder: (BuildContext context,int index){
          return Image.network("https://via.placeholder.com/350x150",fit: BoxFit.fill,);
        },
        itemCount: 3,
        pagination: SwiperPagination(),
        control: SwiperControl(),
      ),
    );
  }
}

Constructor

Basic

ParameterDefaultDescription
scrollDirectionAxis.horizontalIf Axis.horizontal, the scroll view's children are arranged horizontally in a row instead of vertically in a column.
looptrueSet to false to disable continuous loop mode.
index0Index number of initial slide.
autoplayfalseSet to true enable auto play mode.
onIndexChangedvoid onIndexChanged(int index)Called with the new index when the user swiped or autoplay
onTapvoid onTap(int index)Called when user tap ui.
duration300.0The milliscends of every transaction animation costs
paginationnullset SwiperPagination() to show default pagination
controlnullset SwiperControl() to show default control buttons

Pagination

The pagination extends from SwiperPlugin,the SwiperPlugin provides extra ui for Swiper.Set SwiperPagination() to show default pagination.

ParameterDefaultDescription
alignmentAlignment.bottomCenterChange this value if you what to put pagination in other place
marginconst EdgeInsets.all(10.0)The distance between inner side of the parent container.
builderSwiperPagination.dotsThere 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:

Swiper(
    ...,
    pagination: SwiperCustomPagination(
        builder:(BuildContext context, SwiperPluginConfig config){
            return YourOwnPagination();
        }
    )
);

Implemented pagination
DotSwiperPaginationBuilder
ParameterDefaultDescriptionRequired
activeColorTheme.of(context).primaryColorActive bullet colorfalse
colorTheme.of(context).scaffoldBackgroundColorBullet colorfalse
activeSize10.0Active bullet sizefalse
size10.0Bullet sizefalse
space3.0Distance between bulletsfalse
key-keyfalse
FractionPaginationBuilder
ParameterDefaultDescriptionRequired
activeColorTheme.of(context).primaryColorActive font colorfalse
colorTheme.of(context).scaffoldBackgroundColorfont colorfalse
activeFontSize35.0Active font sizefalse
fontSize20.0Font sizefalse
key-keyfalse
RectSwiperPaginationBuilder
ParameterDefaultDescriptionRequired
activeColorTheme.of(context).primaryColorActive bullet colorfalse
colorTheme.of(context).scaffoldBackgroundColorBullet colorfalse
activeSize10.0Active bullet sizefalse
size10.0Bullet sizefalse
space3.0Distance between bulletsfalse
key-keyfalse

Control buttons

The control also extends from SwiperPlugin,set SwiperControl() to show default control buttons.

ParameterDefaultDescription
iconPreviousIcons.arrow_back_iosThe icon data to display previous control button
iconNextIcons.arrow_forward_iosThe icon data to display next.
colorTheme.of(context).primaryColorControl button color
disableColorTheme.of(context).disabledColorDisabled control button color
size30.0Control button size
paddingconst 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 SwiperController() and save the instance by futher usage.

MethodDescription
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

ParameterDefaultDescription
autoplayDelay3000Autoplay delay milliseconds.
autoplayDisableOnInteractiontrueIf set true, autoplay is disabled when use swipes.

Build in layouts

Swiper(
  itemBuilder: (BuildContext context, int index) {
    return Image.network(
      "https://via.placeholder.com/288x188",
      fit: BoxFit.fill,
    );
  },
  itemCount: 10,
  viewportFraction: 0.8,
  scale: 0.9,
)

Swiper(
  itemBuilder: (BuildContext context, int index) {
    return Image.network(
      "https://via.placeholder.com/288x188",
      fit: BoxFit.fill,
    );
  },
  itemCount: 10,
  itemWidth: 300.0,
  layout: SwiperLayout.STACK,
)

Swiper(
    itemBuilder: (BuildContext context, int index) {
      return Image.network(
        "https://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:


 Swiper(
  layout: SwiperLayout.CUSTOM,
  customLayoutOption: CustomLayoutOption(
      startIndex: -1,
      stateCount: 3
  ).addRotate([
    -45.0/180,
    0.0,
    45.0/180
  ]).addTranslate([
    Offset(-370.0, -40.0),
    Offset(0.0, 0.0),
    Offset(370.0, -40.0)
  ]),
  itemWidth: 300.0,
  itemHeight: 200.0,
  itemBuilder: (context, index) {
    return Container(
      color: Colors.grey,
      child: Center(
        child: Text("$index"),
      ),
    );
  },
  itemCount: 10)

The CustomLayoutOption is designed to describe animations. It is very easy to specify every state of items in Swiper.

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
    Offset(-370.0, -40.0),
    Offset(0.0, 0.0),
    Offset(370.0, -40.0)
  ])

Codes

Example

ConstrainedBox(
  child: Swiper(
    outer:false,
    itemBuilder: (c, i) {
      return Wrap(
        runSpacing: 6.0,
        children: [0,1,2,3,4,5,6,7,8,9].map((i){
          return SizedBox(
            width: MediaQuery.of(context).size.width/5,
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: <Widget>[
                SizedBox(
                  child: Container(
                    child: 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,
                ),
                Padding(padding: EdgeInsets.only(top:6.0),child: Text("$i"),)
              ],
            ),
          );
        }).toList(),
      );
    },
    pagination: SwiperPagination(
      margin: EdgeInsets.all(5.0)
    ),
    itemCount: 10,
  ),
    constraints:BoxConstraints.loose(Size(screenWidth, 170.0))
),

You can find all custom options here:

https://github.com/TheAnkurPanchani/flutter_swiper/blob/master/example/lib/src/ExampleCustom.dart

Libraries

card_swiper