{"id":13669956,"url":"https://github.com/best-flutter/flutter_swiper","last_synced_at":"2025-05-14T23:06:27.935Z","repository":{"id":40637001,"uuid":"134032133","full_name":"best-flutter/flutter_swiper","owner":"best-flutter","description":"The best swiper for flutter , with multiple layouts, infinite loop. Compatible with Android \u0026 iOS.","archived":false,"fork":false,"pushed_at":"2023-04-23T10:38:29.000Z","size":6397,"stargazers_count":3525,"open_issues_count":238,"forks_count":719,"subscribers_count":41,"default_branch":"master","last_synced_at":"2025-05-11T19:02:28.541Z","etag":null,"topics":["carousel","carousel-plugin","flutter","flutter-plugin","flutter-widget","swiper"],"latest_commit_sha":null,"homepage":"","language":"Dart","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/best-flutter.png","metadata":{"files":{"readme":"README-ZH.md","changelog":"CHANGELOG-ZH.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":"ROADMAP.md","authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-05-19T05:19:41.000Z","updated_at":"2025-05-05T04:35:21.000Z","dependencies_parsed_at":"2024-06-18T11:18:01.637Z","dependency_job_id":null,"html_url":"https://github.com/best-flutter/flutter_swiper","commit_stats":null,"previous_names":["jzoom/flutter_swiper"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/best-flutter%2Fflutter_swiper","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/best-flutter%2Fflutter_swiper/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/best-flutter%2Fflutter_swiper/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/best-flutter%2Fflutter_swiper/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/best-flutter","download_url":"https://codeload.github.com/best-flutter/flutter_swiper/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254101588,"owners_count":22014907,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["carousel","carousel-plugin","flutter","flutter-plugin","flutter-widget","swiper"],"created_at":"2024-08-02T09:00:26.867Z","updated_at":"2025-05-14T23:06:22.918Z","avatar_url":"https://github.com/best-flutter.png","language":"Dart","readme":"![Logo](banner.jpg)\n\n\u003cp align=\"center\"\u003e\n    \u003ca href=\"https://travis-ci.org/best-flutter/flutter_swiper\"\u003e\n        \u003cimg src=\"https://travis-ci.org/best-flutter/flutter_swiper.svg?branch=master\" alt=\"Build Status\" /\u003e\n    \u003c/a\u003e\n    \u003ca href=\"https://coveralls.io/github/best-flutter/flutter_swiper?branch=master\"\u003e\n        \u003cimg src=\"https://coveralls.io/repos/github/best-flutter/flutter_swiper/badge.svg?branch=master\" alt=\"Coverage Status\" /\u003e\n    \u003c/a\u003e\n    \u003ca href=\"https://github.com/jzoom/flutter_swiper/pulls\"\u003e\n        \u003cimg src=\"https://img.shields.io/badge/PRs-Welcome-brightgreen.svg\" alt=\"PRs Welcome\" /\u003e\n    \u003c/a\u003e\n    \u003ca href=\"https://pub.flutter-io.cn/packages/flutter_swiper\"\u003e\n        \u003cimg src=\"https://img.shields.io/pub/v/flutter_swiper.svg\" alt=\"pub package\" /\u003e\n    \u003c/a\u003e\n    \u003ca target=\"_blank\" href=\"https://shang.qq.com/wpa/qunwpa?idkey=a71a2504cda4cc9ace3320f2dc588bdae928abc671e903463caeb71ec9302c2c\"\u003e\u003cimg border=\"0\" src=\"https://pub.idqqimg.com/wpa/images/group.png\" alt=\"best-flutter\" title=\"best-flutter\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\u003cp align=\"center\"\u003e\n    \u003ca href=\"https://github.com/jzoom/flutter_swiper\"\u003e\n        \u003cb\u003e英文说明\u003c/b\u003e\n    \u003c/a\u003e\n\u003c/p\u003e\n\n\n# flutter_swiper\n\nflutter最强大的siwiper, 多种布局方式，无限轮播，Android和IOS双端适配.\n\n# :sparkles::sparkles: New Features: 分页组件\n\n正在使用这个项目作为分页： [flutter_page_indicator](https://github.com/best-flutter/flutter_page_indicator)  .\n\n# :sparkles::sparkles: New Features: 视差\n\n我们在 Swiper 中也像android一样支持了 `PageTransformer`, 只要给Swiper设置一下 `transformer` 属性就行,\n这里返回一个被转换的组件给Swiper. 目前仅仅支持 `DEFAULT`布局.\n感谢 @FlutterRocks ,棒棒哒 👏.\n\n正在使用这个项目作为视差 [transformer_page_view](https://github.com/best-flutter/transformer_page_view)  .\n\n\n\n# :sparkles::sparkles: 新功能\n\n\n![](https://github.com/jzoom/images/raw/master/layout1.gif)\n\n![](https://github.com/jzoom/images/raw/master/layout2.gif)\n\n![](https://github.com/jzoom/images/raw/master/layout3.gif)\n\n[更多](#内建的布局)\n\n\n# 截图\n\n![Horizontal](https://github.com/jzoom/flutter_swiper/raw/master/example/res/1.gif)\n\n![Vertical](https://github.com/jzoom/flutter_swiper/raw/master/example/res/2.gif)\n\n![Custom Pagination](https://github.com/jzoom/flutter_swiper/raw/master/example/res/3.gif)\n\n![Custom Pagination](https://github.com/jzoom/flutter_swiper/raw/master/example/res/4.gif)\n\n![Phone](https://github.com/jzoom/flutter_swiper/raw/master/example/res/5.gif)\n\n![Example](https://github.com/jzoom/images/raw/master/swiper-example.gif)\n\n[更多](#代码)\n\n## 功能路线\n\n1.x.x 功能实现：\n\n- [x] 无限循环轮播\n- [x] 控制按钮\n- [x] 分页指示器\n- [x] 非无限循环模式\n- [x] 单元测试\n- [x] 例子\n- [x] 滚动方向\n- [x] 可定制控制按钮\n- [x] 可定制分页\n- [x] 自动播放\n- [x] 控制器\n- [x] 外部分页指示器\n- [ ] 更多布局方式\n\n\n## 更新日志\n\n\u003e参考:[CHANGELOG.md](https://github.com/jzoom/flutter_swiper/blob/master/CHANGELOG-ZH.md)\n\n## 目录\n\n- [安装](#安装)\n- [基本使用](#基本使用)\n- [构建](#构建)\n  + [基本构造函数](#基本构造函数)\n  + [分页指示器](#分页指示器)\n  + [控制按钮](#控制按钮)\n  + [控制器](#控制器)\n  + [自动播放](#自动播放)\n+ [内建的布局](#内建的布局)\n+ [一些常用代码示例](#代码)\n\n### 安装\n\n增加\n\n```bash\n\nflutter_swiper : ^lastest_version\n\n```\n到项目根目录下的 pubspec.yaml ,并且根目录运行命令行 \n\n```bash\nflutter packages get \n```\n\n\n### 基本使用\n\n使用命令行创建一个新项目:\n\n```\nflutter create myapp\n```\n\n编辑 lib/main.dart:\n\n```\n\nimport 'package:flutter/material.dart';\n\nimport 'package:flutter_swiper/flutter_swiper.dart';\n\nvoid main() =\u003e runApp(new MyApp());\n\nclass MyApp extends StatelessWidget {\n  @override\n  Widget build(BuildContext context) {\n    return new MaterialApp(\n      title: 'Flutter Demo',\n      theme: new ThemeData(\n        primarySwatch: Colors.blue,\n      ),\n      home: new MyHomePage(title: 'Flutter Demo Home Page'),\n    );\n  }\n}\n\nclass MyHomePage extends StatefulWidget {\n  MyHomePage({Key key, this.title}) : super(key: key);\n\n  final String title;\n\n  @override\n  _MyHomePageState createState() =\u003e new _MyHomePageState();\n}\n\nclass _MyHomePageState extends State\u003cMyHomePage\u003e {\n\n  @override\n  Widget build(BuildContext context) {\n    return new Scaffold(\n      appBar: new AppBar(\n        title: new Text(widget.title),\n      ),\n    body:  new Swiper(\n        itemBuilder: (BuildContext context,int index){\n          return new Image.network(\"http://via.placeholder.com/350x150\",fit: BoxFit.fill,);\n        },\n        itemCount: 3,\n        pagination: new SwiperPagination(),\n        control: new SwiperControl(),\n      ),\n    );\n  }\n}\n\n```\n\n\n\n### 构建\n\n\n#### 基本参数\n\n| 参数            | 默认值             |           描述     |\n| :-------------- |:-----------------:| :------------------------|\n| scrollDirection | Axis.horizontal  |滚动方向，设置为Axis.vertical如果需要垂直滚动   |\n| loop            | true             |无限轮播模式开关                              |\n| index           | 0                |初始的时候下标位置                            |\n| autoplay        | false             |自动播放开关. |\n| onIndexChanged  | void onIndexChanged(int index)  | 当用户手动拖拽或者自动播放引起下标改变的时候调用 |\n| onTap           | void onTap(int index)  | 当用户点击某个轮播的时候调用 |\n| duration        | 300.0            | 动画时间，单位是毫秒 |\n| pagination      | null             | 设置 `new SwiperPagination()` 展示默认分页指示器\n| control | null | 设置 `new SwiperControl()` 展示默认分页按钮\n\n\n#### 分页指示器\n\n分页指示器继承自 `SwiperPlugin`,`SwiperPlugin` 为 `Swiper` 提供额外的界面.设置为`new SwiperPagination()` 展示默认分页.\n\n\n| 参数            | 默认值             |           描述     |\n| :------------ |:---------------:| :-----|\n| alignment | Alignment.bottomCenter  | 如果要将分页指示器放到其他位置，那么可以修改这个参数 |\n| margin | const EdgeInsets.all(10.0) | 分页指示器与容器边框的距离 |\n| builder | SwiperPagination.dots | 目前已经定义了两个默认的分页指示器样式： `SwiperPagination.dots` 、 `SwiperPagination.fraction`，都可以做进一步的自定义. |\n\n如果需要定制自己的分页指示器，那么可以这样写：\n\n```\nnew Swiper(\n    ...,\n    pagination:new SwiperCustomPagination(\n        builder:(BuildContext context, SwiperPluginConfig config){\n            return new YourOwnPaginatipon();\n        }\n    )\n);\n\n```\n\n\n\n#### 控制按钮\n\n控制按钮组件也是继承自 `SwiperPlugin`,设置 `new SwiperControl()` 展示默认控制按钮.\n\n\n| 参数            | 默认值             |           描述     |\n| :------------ |:---------------:| :-----|\n| iconPrevious | Icons.arrow_back_ios  | 上一页的IconData |\n| iconNext | Icons.arrow_forward_ios | 下一页的IconData |\n| color | Theme.of(context).primaryColor | 控制按钮颜色 |\n| size | 30.0                           | 控制按钮的大小 |\n| padding | const EdgeInsets.all(5.0) | 控制按钮与容器的距离 |\n\n\n#### 控制器(SwiperController)\n\n`SwiperController` 用于控制 Swiper的`index`属性, 停止和开始自动播放. 通过 `new SwiperController()` 创建一个SwiperController实例，并保存，以便将来能使用。\n\n\n| 方法            | 描述     |\n| :------------ |:-----|\n| void move(int index, {bool animation: true}) | 移动到指定下标，设置是否播放动画|\n| void next({bool animation: true}) | 下一页 |\n| void previous({bool animation: true}) | 上一页 |\n| void startAutoplay() | 开始自动播放 |\n| void stopAutoplay() | 停止自动播放 |\n\n\n\n#### 自动播放\n\n| 参数            | 默认值             |           描述     |\n| :------------ |:---------------:| :-----|\n| autoplayDely | 3000  | 自动播放延迟毫秒数. |\n| autoplayDisableOnInteraction | true | 当用户拖拽的时候，是否停止自动播放. |\n\n\n\n## 内建的布局\n![](https://github.com/jzoom/images/raw/master/layout1.gif)\n\n```\nnew Swiper(\n  itemBuilder: (BuildContext context, int index) {\n    return new Image.network(\n      \"http://via.placeholder.com/288x188\",\n      fit: BoxFit.fill,\n    );\n  },\n  itemCount: 10,\n  viewportFraction: 0.8,\n  scale: 0.9,\n)\n\n```\n\n\n\n![](https://github.com/jzoom/images/raw/master/layout2.gif)\n\n```\nnew Swiper(\n  itemBuilder: (BuildContext context, int index) {\n    return new Image.network(\n      \"http://via.placeholder.com/288x188\",\n      fit: BoxFit.fill,\n    );\n  },\n  itemCount: 10,\n  itemWidth: 300.0,\n  layout: SwiperLayout.STACK,\n)\n```\n\n![](https://github.com/jzoom/images/raw/master/layout3.gif)\n\n```\nnew Swiper(\n    itemBuilder: (BuildContext context, int index) {\n      return new Image.network(\n        \"http://via.placeholder.com/288x188\",\n        fit: BoxFit.fill,\n      );\n    },\n    itemCount: 10,\n    itemWidth: 300.0,\n    itemHeight: 400.0,\n    layout: SwiperLayout.TINDER,\n )\n```\n\n\n\n![](https://github.com/jzoom/images/raw/master/layout4.gif)\n\n构建你自己的动画十分简单:\n```\n\n new Swiper(\n  layout: SwiperLayout.CUSTOM,\n  customLayoutOption: new CustomLayoutOption(\n      startIndex: -1,\n      stateCount: 3\n  ).addRotate([\n    -45.0/180,\n    0.0,\n    45.0/180\n  ]).addTranslate([\n    new Offset(-370.0, -40.0),\n    new Offset(0.0, 0.0),\n    new Offset(370.0, -40.0)\n  ]),\n  itemWidth: 300.0,\n  itemHeight: 200.0,\n  itemBuilder: (context, index) {\n    return new Container(\n      color: Colors.grey,\n      child: new Center(\n        child: new Text(\"$index\"),\n      ),\n    );\n  },\n  itemCount: 10)\n\n```\n\n`CustomLayoutOption` 被设计用来描述布局和动画,很简单的可以指定每一个元素的状态.\n\n```\nnew CustomLayoutOption(\n      startIndex: -1,  /// 开始下标\n      stateCount: 3    /// 下面的数组长度 \n  ).addRotate([        //  每个元素的角度\n    -45.0/180,\n    0.0,\n    45.0/180\n  ]).addTranslate([           /// 每个元素的偏移\n    new Offset(-370.0, -40.0),\n    new Offset(0.0, 0.0),\n    new Offset(370.0, -40.0)\n  ])\n\n```\n\n## 代码\n\n\n![Example](https://github.com/jzoom/images/raw/master/swiper-example.gif)\n\n```\nnew ConstrainedBox(\n  child: new Swiper(\n    outer:false,\n    itemBuilder: (c, i) {\n      return new Wrap(\n        runSpacing:  6.0,\n        children: [0,1,2,3,4,5,6,7,8,9].map((i){\n          return new SizedBox(\n            width: MediaQuery.of(context).size.width/5,\n            child: new Column(\n              mainAxisSize: MainAxisSize.min,\n              children: \u003cWidget\u003e[\n                new SizedBox(\n                  child:  new Container(\n                    child: new Image.network(\"https://fuss10.elemecdn.com/c/db/d20d49e5029281b9b73db1c5ec6f9jpeg.jpeg%3FimageMogr/format/webp/thumbnail/!90x90r/gravity/Center/crop/90x90\"),\n                  ),\n                  height: MediaQuery.of(context).size.width * 0.12,\n                  width: MediaQuery.of(context).size.width * 0.12,\n                ),\n                new Padding(padding: new EdgeInsets.only(top:6.0),child: new Text(\"$i\"),)\n              ],\n            ),\n          );\n        }).toList(),\n      );\n    },\n    pagination: new SwiperPagination(\n      margin: new EdgeInsets.all(5.0)\n    ),\n    itemCount: 10,\n  ),\n    constraints:new BoxConstraints.loose(new Size(screenWidth, 170.0))\n),\n\n```\n\n\n\n这里可以找到所有的定制选项\n\n\u003ehttps://github.com/jzoom/flutter_swiper/blob/master/example/lib/src/ExampleCustom.dart","funding_links":[],"categories":["Dart"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbest-flutter%2Fflutter_swiper","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbest-flutter%2Fflutter_swiper","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbest-flutter%2Fflutter_swiper/lists"}