card_swiper #

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

✨✨ New Features:Layout for pagination. #

We are using this project flutter_page_indicator now .

✨✨ 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 .

✨✨ New Features:Layout #

See More

Showcases #

See More

Changelogs #

see:CHANGELOG.md

Getting Started #

• Installation
• Basic Usage
• Constructor
  • Basic
  • Pagination
  • Control buttons
  • Controller
  • Autoplay
• Build in layouts
• Codes

Installation #

Add

card_swiper : ^3.0.0

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

Pagination

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

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

FractionPaginationBuilder

RectSwiperPaginationBuilder

Control buttons

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

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.

Autoplay

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(
  // Which index is the first item of array below
  startIndex: -1,
  // array length
  stateCount: 3
)..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 #

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))
),

FAQs #

How to remove default controlls? #

• Do not pass any value in control parameter of constructor

How to remove default pagination? #

• Do not pass any value in pagination parameter of constructor

You can find all custom options here:

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