flutter_swiper 1.0.4

  • README.md
  • CHANGELOG.md
  • Example
  • Installing
  • Versions
  • 96

language : English | 中文

build_status Coverage Status PRs Welcome License MIT

flutter_swiper

The best swiper for flutter , with multiple layouts, infinite loop. Compatible with Android & iOS.

✨✨ New Features:Layout

See More

Showcases

Horizontal

Vertical

Custom Pagination

Custom Pagination

Phone

Example

See More

Roadmap

see:ROADMAP.md

Changelogs

see:CHANGELOG.md

Getting Started

Installation

Add


flutter_swiper : ^lastest_version

to your pubspec.yaml ,and run

flutter packages get 

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

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

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

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:  new Swiper(
        itemBuilder: (BuildContext context,int index){
          return new Image.network("http://via.placeholder.com/350x150",fit: BoxFit.fill,);
        },
        itemCount: 3,
        pagination: new SwiperPagination(),
        control: new 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 new SwiperPagination() to show default pagination
controlnullset new SwiperControl() to show default control buttons

Pagination

The pagination extends from SwiperPlugin,the SwiperPlugin provides extra ui for Swiper.Set new 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:

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

Control buttons

The control also extends from SwiperPlugin,set new 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
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 new 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.
autoplayDiableOnInteractiontrueDisable autoplay when user drag.

Build in layouts

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

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

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


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

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

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

Codes

Example

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

You can find all custom options here:

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

[0.0.1] - [2018/05/20]

* Infinite loop
* Control buttons
* Pagination
* Custom control buttons
* Custom pagination
* Controler

[0.0.2] - [2018/05/20]

* Autoplay
* Plugins support 
* Examples

[0.0.3] - [2018/05/20]

* Update README
* Support none loop mode
* Add more examples

[0.0.4] - [2018/05/20]

* Update README

[0.0.5] - [2018/05/24]

* Fix zero itemCount bug

[0.0.6] - [2018/05/24]

* Fix index bug
    

[0.0.7] - [2018/05/24]

* The default color of pagination is ThemeData.scaffoldBackgroundColor and ThemeData.primaryColor
* The default color of control buttons is ThemeData.primaryColor and ThemeData.disabledColor
* The alignment of pagination is Alignment.bottomCenter by default when scrollDirection== Axis.horizontal, Alignment.centerRight by default when scrollDirection== Axis.vertical
* Change default value of `autoplay` to false


[0.0.8] - [2018/06/07]

* And chinese document
* Update infinity_page_view version to 1.0.0

[0.0.9] - [2018/06/10]

* Add ci
* Add testcase

[1.0.0] - [2018/07/08]

* Add layouts ( DEFAULT,STACK,TINDER )
* Allow to put pagination outer of the swiper container.

[1.0.1] - [2018/07/11]

* Add layout (CUSTOM) so that you can create your own layout

[1.0.2] - [2018/07/16]

* Fix #4

[1.0.3] - [2018/07/18]

* Use new to create everything. See #5

[1.0.4] - [2018/07/18]

* Fix some typo,thanks to [csharad](https://github.com/csharad)

example/lib/main.dart

import 'package:flutter/material.dart';

import 'package:flutter_swiper/flutter_swiper.dart';
import 'src/ExampleCustom.dart';
import 'src/config.dart';
import 'src/ExampleSwiperInScrollView.dart';

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

class MyApp extends StatelessWidget {
  Widget buildHome() {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text(""),
      ),
      body: new Container(
        color: Colors.black87,
        child: new Column(
          children: <Widget>[
            new SizedBox(
              height: 200.0,
              child: Swiper(
                  layout: SwiperLayout.DEFAULT,
                  customLayoutOption: new CustomLayoutOption(
                          startIndex: -1, stateCount: 3)
                      .addRotate([-45.0 / 180, 0.0, 45.0 / 180]).addTranslate([
                    new Offset(-370.0, -40.0),
                    new Offset(0.0, 0.0),
                    new Offset(370.0, -40.0)
                  ]),
                  itemWidth: 300.0,
                  itemHeight: 200.0,
                  itemBuilder: (context, index) {
                    return new Container(
                      color: Colors.grey,
                      child: new Center(
                        child: new Text("$index"),
                      ),
                    );
                  },
                  itemCount: 10),
            )
          ],
        ),
      ),
    );
  }

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new MyHomePage(title: 'Flutter Swiper'),
      //     home: buildHome() ,
      routes: {
        '/example01': (BuildContext context) => new ExampleHorizontal(),
        '/example02': (BuildContext context) => new ExampleVertical(),
        '/example03': (BuildContext context) => new ExampleFraction(),
        '/example04': (BuildContext context) => new ExampleCustomPagination(),
        '/example05': (BuildContext context) => new ExamplePhone(),
        '/example06': (BuildContext context) => new ScaffoldWidget(
            child: new ExampleSwiperInScrollView(), title: "ScrollView"),
        '/example07': (BuildContext context) => new ScaffoldWidget(
              child: new ExampleCustom(),
              title: "Custom All",
            )
      },
    );
  }
}

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> {
  List<Widget> render(BuildContext context, List children) {
    return ListTile
        .divideTiles(
            context: context,
            tiles: children.map((dynamic data) {
              return buildListTile(context, data[0], data[1], data[2]);
            }))
        .toList();
  }

  Widget buildListTile(
      BuildContext context, String title, String subtitle, String url) {
    return new ListTile(
      onTap: () {
        Navigator.of(context).pushNamed(url);
      },
      isThreeLine: true,
      dense: false,
      leading: null,
      title: new Text(title),
      subtitle: new Text(subtitle),
      trailing: new Icon(
        Icons.arrow_right,
        color: Colors.blueAccent,
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: Text(widget.title),
      ),
      body: new ListView(
        children: render(context, [
          ["Horizontal", "Scroll Horizontal", "/example01"],
          ["Vertical", "Scroll Vertical", "/example02"],
          ["Fraction", "Fraction style", "/example03"],
          ["Custom Pagination", "Custom Pagination", "/example04"],
          ["Phone", "Phone view", "/example05"],
          ["ScrollView ", "In a ScrollView", "/example06"],
          ["Custom", "Custom all properties", "/example07"]
        ]),
      ),
    );
  }
}

const List<String> titles = [
  "Flutter Swiper is awosome",
  "Really nice",
  "Yeap"
];

class ExampleHorizontal extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
        appBar: AppBar(
          title: Text("ExampleHorizontal"),
        ),
        body: new Swiper(
          itemBuilder: (BuildContext context, int index) {
            return new Image.asset(
              images[index],
              fit: BoxFit.fill,
            );
          },
          autoplay: true,
          itemCount: images.length,
          reverse: false,
          pagination: new SwiperPagination(),
          control: new SwiperControl(),
        ));
  }
}

class ExampleVertical extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
        appBar: AppBar(
          title: Text("ExampleVertical"),
        ),
        body: new Swiper(
          itemBuilder: (BuildContext context, int index) {
            return new Image.asset(
              images[index],
              fit: BoxFit.fill,
            );
          },
          autoplay: true,
          itemCount: images.length,
          reverse: false,
          scrollDirection: Axis.vertical,
          pagination: new SwiperPagination(alignment: Alignment.centerRight),
          control: new SwiperControl(),
        ));
  }
}

class ExampleFraction extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
        appBar: new AppBar(
          title: Text("ExampleFraction"),
        ),
        body: new Column(
          children: <Widget>[
            Expanded(
                child: new Swiper(
              itemBuilder: (BuildContext context, int index) {
                return new Image.asset(
                  images[index],
                  fit: BoxFit.fill,
                );
              },
              autoplay: true,
              itemCount: images.length,
              reverse: false,
              pagination:
                  new SwiperPagination(builder: SwiperPagination.fraction),
              control: new SwiperControl(),
            )),
            Expanded(
                child: new Swiper(
              itemBuilder: (BuildContext context, int index) {
                return new Image.asset(
                  images[index],
                  fit: BoxFit.fill,
                );
              },
              autoplay: true,
              itemCount: images.length,
              reverse: false,
              scrollDirection: Axis.vertical,
              pagination: new SwiperPagination(
                  alignment: Alignment.centerRight,
                  builder: SwiperPagination.fraction),
            ))
          ],
        ));
  }
}

class ExampleCustomPagination extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
        appBar: new AppBar(
          title: new Text("Custom Pagination"),
        ),
        body: new Column(
          children: <Widget>[
            new Expanded(
              child: new Swiper(
                itemBuilder: (BuildContext context, int index) {
                  return new Image.asset(
                    images[index],
                    fit: BoxFit.fill,
                  );
                },
                autoplay: true,
                itemCount: images.length,
                reverse: false,
                pagination: new SwiperPagination(
                    margin: new EdgeInsets.all(0.0),
                    builder: new SwiperCustomPagination(builder:
                        (BuildContext context, SwiperPluginConfig config) {
                      return new ConstrainedBox(
                        child: new Container(
                            color: Colors.white,
                            child: new Text(
                              "${titles[config.activeIndex]} ${config.activeIndex+1}/${config.itemCount}",
                              style: new TextStyle(fontSize: 20.0),
                            )),
                        constraints: new BoxConstraints.expand(height: 50.0),
                      );
                    })),
                control: new SwiperControl(),
              ),
            ),
            new Expanded(
              child: new Swiper(
                itemBuilder: (BuildContext context, int index) {
                  return new Image.asset(
                    images[index],
                    fit: BoxFit.fill,
                  );
                },
                autoplay: true,
                itemCount: images.length,
                reverse: false,
                pagination: new SwiperPagination(
                    margin: new EdgeInsets.all(0.0),
                    builder: new SwiperCustomPagination(builder:
                        (BuildContext context, SwiperPluginConfig config) {
                      return new ConstrainedBox(
                        child: new Row(
                          children: <Widget>[
                            new Text(
                              "${titles[config.activeIndex]} ${config.activeIndex+1}/${config.itemCount}",
                              style: TextStyle(fontSize: 20.0),
                            ),
                            new Expanded(
                              child: new Align(
                                alignment: Alignment.centerRight,
                                child: new DotSwiperPaginationBuilder(
                                        color: Colors.black12,
                                        activeColor: Colors.black,
                                        size: 10.0,
                                        activeSize: 20.0)
                                    .build(context, config),
                              ),
                            )
                          ],
                        ),
                        constraints: new BoxConstraints.expand(height: 50.0),
                      );
                    })),
                control: new SwiperControl(color: Colors.redAccent),
              ),
            )
          ],
        ));
  }
}

class ExamplePhone extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text("Phone"),
      ),
      body: new Stack(
        children: <Widget>[
          ConstrainedBox(
            constraints: new BoxConstraints.expand(),
            child: new Image.asset(
              "images/bg.jpeg",
              fit: BoxFit.fill,
            ),
          ),
          new Swiper.children(
            autoplay: false,
            pagination: new SwiperPagination(
                margin: new EdgeInsets.fromLTRB(0.0, 0.0, 0.0, 30.0),
                builder: new DotSwiperPaginationBuilder(
                    color: Colors.white30,
                    activeColor: Colors.white,
                    size: 20.0,
                    activeSize: 20.0)),
            children: <Widget>[
              new Image.asset(
                "images/1.png",
                fit: BoxFit.contain,
              ),
              new Image.asset(
                "images/2.png",
                fit: BoxFit.contain,
              ),
              new Image.asset("images/3.png", fit: BoxFit.contain)
            ],
          )
        ],
      ),
    );
  }
}

class ScaffoldWidget extends StatelessWidget {
  final Widget child;
  final String title;
  final List<Widget> actions;

  ScaffoldWidget({this.child, this.title, this.actions});

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text(title),
        actions: actions,
      ),
      body: child,
    );
  }
}

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:


dependencies:
  flutter_swiper: ^1.0.4

2. Install it

You can install packages from the command line:

with Flutter:


$ flutter packages get

Alternatively, your editor might support flutter packages get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:


import 'package:flutter_swiper/flutter_swiper.dart';
  
Version Uploaded Documentation Archive
1.0.4 Jul 18, 2018 Go to the documentation of flutter_swiper 1.0.4 Download flutter_swiper 1.0.4 archive
1.0.3 Jul 18, 2018 Go to the documentation of flutter_swiper 1.0.3 Download flutter_swiper 1.0.3 archive
1.0.2 Jul 15, 2018 Go to the documentation of flutter_swiper 1.0.2 Download flutter_swiper 1.0.2 archive
1.0.1 Jul 11, 2018 Go to the documentation of flutter_swiper 1.0.1 Download flutter_swiper 1.0.1 archive
1.0.0 Jul 9, 2018 Go to the documentation of flutter_swiper 1.0.0 Download flutter_swiper 1.0.0 archive
0.0.9 Jun 10, 2018 Go to the documentation of flutter_swiper 0.0.9 Download flutter_swiper 0.0.9 archive
0.0.8 Jun 7, 2018 Go to the documentation of flutter_swiper 0.0.8 Download flutter_swiper 0.0.8 archive
0.0.7 May 24, 2018 Go to the documentation of flutter_swiper 0.0.7 Download flutter_swiper 0.0.7 archive
0.0.6 May 24, 2018 Go to the documentation of flutter_swiper 0.0.6 Download flutter_swiper 0.0.6 archive
0.0.5 May 24, 2018 Go to the documentation of flutter_swiper 0.0.5 Download flutter_swiper 0.0.5 archive

All 14 versions...

Popularity:
Describes how popular the package is relative to other packages. [more]
91
Health:
Code health derived from static analysis. [more]
100
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
100
Overall:
Weighted score of the above. [more]
96
Learn more about scoring.

We analyzed this package on Aug 10, 2018, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.0.0
  • pana: 0.11.8
  • Flutter: 0.5.7

Platforms

Detected platforms: Flutter

References Flutter, and has no conflicting libraries.

Suggestions

Format lib/src/swiper_pagination.dart.

Run flutter format to format lib/src/swiper_pagination.dart.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.0.0-dev.48.0 <3.0.0
flutter 0.0.0
Transitive dependencies
collection 1.14.6 1.14.11
meta 1.1.5 1.1.6
sky_engine 0.0.99
typed_data 1.1.5 1.1.6
vector_math 2.0.6 2.0.8
Dev dependencies
flutter_test