• Stars
    star
    3,501
  • Rank 12,709 (Top 0.3 %)
  • Language
    Dart
  • License
    MIT License
  • Created over 6 years ago
  • Updated over 1 year ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

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

Logo

Build Status Coverage Status PRs Welcome pub package best-flutter

中文说明

flutter_swiper

The best swiper 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

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

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

Pagination

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

Parameter Default Description
alignment Alignment.bottomCenter Change this value if you what to put pagination in other place
margin const EdgeInsets.all(10.0) The distance between inner side of the parent container.
builder SwiperPagination.dots There 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.

Parameter Default Description
iconPrevious Icons.arrow_back_ios The icon data to display previous control button
iconNext Icons.arrow_forward_ios The icon data to display next.
color Theme.of(context).primaryColor Control button color
size 30.0 Control button size
padding const 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.

Method Description
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

Parameter Default Description
autoplayDelay 3000 Autoplay delay milliseconds.
autoplayDisableOnInteraction true If set true, autoplay is disabled when use swipes.

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

More Repositories

1

transformer_page_view

PageTransformer for flutter
Dart
518
star
2

flutter_amap_location

高德地图flutter定位组件
Dart
274
star
3

flutter_dropdown_menu

A dropdown menu for Flutter.
Dart
265
star
4

flutter_page_indicator

Page indicator for flutter, with multiple build-in layouts.
Dart
180
star
5

flutter_jpush

Flutter版本jpush
Objective-C
142
star
6

flutter_amap

A Flutter plugin use amap.高德地图flutter组件
Objective-C
136
star
7

flutter_alipay

A flutter plugin to use alipay.
Dart
135
star
8

flutter_refresh

A Flutter plugin for refreshing every scrollable view by pulling down-up.
Dart
71
star
9

flutter_location_picker

A location area picker for flutter 省市区位置选择器
Dart
63
star
10

sweetalert

sweetalert for flutter
Dart
56
star
11

flutter_wechat_ble

ble 4.0 with wechat style api for flutter. flutter版微信api风格的低功耗蓝牙
Dart
53
star
12

gbk2utf8

A flutter package to convert gbk to utf-8
Dart
43
star
13

flutter-lover

我们是一群热爱flutter的开发者,我们的目标是让更多人爱上flutter,让移动开发变得更加高效、简单。
36
star
14

easy_alert

A package for flutter to use alert and toast within one line code.
Dart
32
star
15

disk_lru_cache

Disk lru cache for flutter.
Dart
31
star
16

flutter_baidu_location

A flutter plugin for baidu geo location.百度地图定位flutter插件
Dart
22
star
17

linker

A plugin for flutter to link with other app.
Dart
21
star
18

lazy_indexed_stack

懒加载IndexedStack,IndexedStack默认全部加载children,在某些情况下我们不希望这样,lazy_indexed_stack在index被访问之后才加载对应的视图
Dart
20
star
19

flutter_statusbar

A flutter plugin to fetch statusbar info like height.
Ruby
16
star
20

binding_helper

A easy way to use WidgetsBind like get rect of your widget
Dart
10
star
21

flutter_easy_nfc

nfc for flutter,android only
Java
7
star
22

dva

dva for flutter, flutter版dva。
Dart
4
star
23

flutter_rongcloud

融云im flutter版本,开发中
Dart
4
star
24

flutter_umpush

flutter友盟推送插件
3
star
25

flutter_issue

flutter的问题、坑汇总,总结便于大家查找
3
star
26

puremvc

flutter版本puremvc
Dart
2
star
27

refresh_view

Dart
2
star
28

flutter_awesome

flutter资源整理, flutter教程、flutter开源库、flutter问题汇总、flutter文章
1
star