[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-9161":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":16,"stars7d":16,"stars30d":16,"stars90d":16,"forks30d":16,"starsTrendScore":16,"compositeScore":17,"rankGlobal":10,"rankLanguage":10,"license":18,"archived":19,"fork":19,"defaultBranch":20,"hasWiki":21,"hasPages":19,"topics":22,"createdAt":10,"pushedAt":10,"updatedAt":29,"readmeContent":30,"aiSummary":31,"trendingCount":16,"starSnapshotCount":16,"syncStatus":32,"lastSyncTime":33,"discoverSource":34},9161,"flutter_swiper","best-flutter\u002Fflutter_swiper","best-flutter","The best swiper for flutter , with multiple layouts, infinite loop. Compatible with Android & iOS.","",null,"Dart",3531,728,40,216,0,30.59,"MIT License",false,"master",true,[23,24,25,26,27,28],"carousel","carousel-plugin","flutter","flutter-plugin","flutter-widget","swiper","2026-06-12 02:02:03","![Logo](banner.jpg)\n\n\u003Cp align=\"center\">\n    \u003Ca href=\"https:\u002F\u002Ftravis-ci.org\u002Fbest-flutter\u002Fflutter_swiper\">\n        \u003Cimg src=\"https:\u002F\u002Ftravis-ci.org\u002Fbest-flutter\u002Fflutter_swiper.svg?branch=master\" alt=\"Build Status\" \u002F>\n    \u003C\u002Fa>\n    \u003Ca href=\"https:\u002F\u002Fcoveralls.io\u002Fgithub\u002Fbest-flutter\u002Fflutter_swiper?branch=master\">\n        \u003Cimg src=\"https:\u002F\u002Fcoveralls.io\u002Frepos\u002Fgithub\u002Fbest-flutter\u002Fflutter_swiper\u002Fbadge.svg?branch=master\" alt=\"Coverage Status\" \u002F>\n    \u003C\u002Fa>\n    \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fjzoom\u002Fflutter_swiper\u002Fpulls\">\n        \u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FPRs-Welcome-brightgreen.svg\" alt=\"PRs Welcome\" \u002F>\n    \u003C\u002Fa>\n    \u003Ca href=\"https:\u002F\u002Fpub.dartlang.org\u002Fpackages\u002Fflutter_swiper\">\n        \u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fpub\u002Fv\u002Fflutter_swiper.svg\" alt=\"pub package\" \u002F>\n    \u003C\u002Fa>\n    \u003Ca target=\"_blank\" href=\"https:\u002F\u002Fshang.qq.com\u002Fwpa\u002Fqunwpa?idkey=a71a2504cda4cc9ace3320f2dc588bdae928abc671e903463caeb71ec9302c2c\">\u003Cimg border=\"0\" src=\"https:\u002F\u002Fpub.idqqimg.com\u002Fwpa\u002Fimages\u002Fgroup.png\" alt=\"best-flutter\" title=\"best-flutter\">\u003C\u002Fa>\n\u003C\u002Fp>\n\u003Cp align=\"center\">\n    \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fjzoom\u002Fflutter_swiper\u002Fblob\u002Fmaster\u002FREADME-ZH.md\">\n        \u003Cb>中文说明\u003C\u002Fb>\n    \u003C\u002Fa>\n\u003C\u002Fp>\n\n\n\n# flutter_swiper\n\nThe best swiper for flutter , with multiple layouts, infinite loop. Compatible with Android & iOS.\n\n\n# :sparkles::sparkles: New Features:Layout for pagination.\n\nWe are using this project [flutter_page_indicator](https:\u002F\u002Fgithub.com\u002Fbest-flutter\u002Fflutter_page_indicator) now .\n\n# :sparkles::sparkles: New Features:PageTransformer\n\nFinally, we have `PageTransformer` like android, just set a `transformer` to `Swiper`,\nit returns a widget that has been transformed. For now, only support for layout `DEFAULT`.\nThanks to @FlutterRocks ,you've done great job 👏.\n\nWe are using this project [transformer_page_view](https:\u002F\u002Fgithub.com\u002Fbest-flutter\u002Ftransformer_page_view) now .\n\n\n# :sparkles::sparkles: New Features:Layout\n\n\n![](https:\u002F\u002Fgithub.com\u002Fjzoom\u002Fimages\u002Fraw\u002Fmaster\u002Flayout1.gif)\n\n![](https:\u002F\u002Fgithub.com\u002Fjzoom\u002Fimages\u002Fraw\u002Fmaster\u002Flayout2.gif)\n\n![](https:\u002F\u002Fgithub.com\u002Fjzoom\u002Fimages\u002Fraw\u002Fmaster\u002Flayout3.gif)\n\n[See More](#build-in-layouts)\n\n\n# Showcases\n\n![Horizontal](https:\u002F\u002Fgithub.com\u002Fjzoom\u002Fflutter_swiper\u002Fraw\u002Fmaster\u002Fexample\u002Fres\u002F1.gif)\n\n![Vertical](https:\u002F\u002Fgithub.com\u002Fjzoom\u002Fflutter_swiper\u002Fraw\u002Fmaster\u002Fexample\u002Fres\u002F2.gif)\n\n![Custom Pagination](https:\u002F\u002Fgithub.com\u002Fjzoom\u002Fflutter_swiper\u002Fraw\u002Fmaster\u002Fexample\u002Fres\u002F3.gif)\n\n![Custom Pagination](https:\u002F\u002Fgithub.com\u002Fjzoom\u002Fflutter_swiper\u002Fraw\u002Fmaster\u002Fexample\u002Fres\u002F4.gif)\n\n![Phone](https:\u002F\u002Fgithub.com\u002Fjzoom\u002Fflutter_swiper\u002Fraw\u002Fmaster\u002Fexample\u002Fres\u002F5.gif)\n\n![Example](https:\u002F\u002Fgithub.com\u002Fjzoom\u002Fimages\u002Fraw\u002Fmaster\u002Fswiper-example.gif)\n\n[See More](#codes)\n\n## Roadmap\n\n>see:[ROADMAP.md](https:\u002F\u002Fgithub.com\u002Fjzoom\u002Fflutter_swiper\u002Fblob\u002Fmaster\u002FROADMAP.md)\n\n## Changelogs\n\n>see:[CHANGELOG.md](https:\u002F\u002Fgithub.com\u002Fjzoom\u002Fflutter_swiper\u002Fblob\u002Fmaster\u002FCHANGELOG.md)\n\n## Getting Started\n\n- [Installation](#installation)\n- [Basic Usage](#basic-usage)\n- [Constructor](#constructor)\n  + [Basic](#basic)\n  + [Pagination](#pagination)\n  + [Control buttons](#control-buttons)\n  + [Controller](#controller)\n  + [Autoplay](#autoplay)\n- [Build in layouts](#build-in-layouts)\n- [Codes](#codes)\n\n### Installation\n\nAdd \n\n```bash\n\nflutter_swiper : ^lastest_version\n\n```\nto your pubspec.yaml ,and run \n\n```bash\nflutter packages get \n```\nin your project's root directory.\n\n### Basic Usage\n\nCreate a new project with command\n\n```\nflutter create myapp\n```\n\nEdit lib\u002Fmain.dart like this:\n\n```\n\nimport 'package:flutter\u002Fmaterial.dart';\n\nimport 'package:flutter_swiper\u002Fflutter_swiper.dart';\n\nvoid main() => 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() => new _MyHomePageState();\n}\n\nclass _MyHomePageState extends State\u003CMyHomePage> {\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:\u002F\u002Fvia.placeholder.com\u002F350x150\",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### Constructor\n\n\n#### Basic\n\n| Parameter  | Default   | Description |\n| :------------ |:---------------:| :-----|\n| scrollDirection | Axis.horizontal  | If `Axis.horizontal`, the scroll view's children are arranged horizontally in a row instead of vertically in a column. |\n| loop | true |Set to `false` to disable continuous loop mode. |\n| index | 0 |  Index number of initial slide. |\n| autoplay | false |Set to `true` enable auto play mode. |\n| onIndexChanged | void onIndexChanged(int index)  | Called with the new index when the user swiped or autoplay |\n| onTap | void onTap(int index)  | Called when user tap ui. |\n| duration | 300.0  | The milliscends of every transaction animation costs  |\n| pagination | null | set `new SwiperPagination()` to show default pagination\n| control | null | set `new SwiperControl()` to show default control buttons\n\n\n#### Pagination\n\nThe pagination extends from `SwiperPlugin`,the `SwiperPlugin` provides extra ui for `Swiper`.Set `new SwiperPagination()` to show default pagination.\n\n\n| Parameter  | Default   | Description |\n| :------------ |:---------------:| :-----|\n| alignment | Alignment.bottomCenter  | Change this value if you what to put pagination in other place |\n| margin | const EdgeInsets.all(10.0) | The distance between inner side of the parent container. |\n| builder | SwiperPagination.dots | There are two default styles `SwiperPagination.dots` and `SwiperPagination.fraction`,both can be customized. |\n\nIf you'd like to customize your own pagination, you can do like this:\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#### Control buttons\n\nThe control also extends from `SwiperPlugin`,set `new SwiperControl()` to show default control buttons.\n\n\n| Parameter  | Default   | Description |\n| :------------ |:---------------:| :-----|\n| iconPrevious | Icons.arrow_back_ios  | The icon data to display `previous` control button |\n| iconNext | Icons.arrow_forward_ios | The icon data to display `next`. |\n| color | Theme.of(context).primaryColor | Control button color |\n| size | 30.0 | Control button size |\n| padding | const EdgeInsets.all(5.0) | Control button padding |\n\n\n#### Controller\n\nThe `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.\n\n\n| Method  | Description |\n| :------------ |:-----|\n| void move(int index, {bool animation: true}) | Move to the spicified `index`,with animation or not |\n| void next({bool animation: true}) | Move to next |\n| void previous({bool animation: true}) | Move to previous |\n| void startAutoplay() | Start autoplay |\n| void stopAutoplay() | Stop autoplay |\n\n\n\n#### Autoplay\n\n| Parameter  | Default   | Description |\n| :------------ |:---------------:| :-----|\n| autoplayDelay | 3000  | Autoplay delay milliseconds. |\n| autoplayDisableOnInteraction | true | If set true, `autoplay` is disabled when use swipes. |\n\n## Build in layouts\n![](https:\u002F\u002Fgithub.com\u002Fjzoom\u002Fimages\u002Fraw\u002Fmaster\u002Flayout1.gif)\n\n```\nnew Swiper(\n  itemBuilder: (BuildContext context, int index) {\n    return new Image.network(\n      \"http:\u002F\u002Fvia.placeholder.com\u002F288x188\",\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:\u002F\u002Fgithub.com\u002Fjzoom\u002Fimages\u002Fraw\u002Fmaster\u002Flayout2.gif)\n\n```\nnew Swiper(\n  itemBuilder: (BuildContext context, int index) {\n    return new Image.network(\n      \"http:\u002F\u002Fvia.placeholder.com\u002F288x188\",\n      fit: BoxFit.fill,\n    );\n  },\n  itemCount: 10,\n  itemWidth: 300.0,\n  layout: SwiperLayout.STACK,\n)\n```\n\n![](https:\u002F\u002Fgithub.com\u002Fjzoom\u002Fimages\u002Fraw\u002Fmaster\u002Flayout3.gif)\n\n```\nnew Swiper(\n    itemBuilder: (BuildContext context, int index) {\n      return new Image.network(\n        \"http:\u002F\u002Fvia.placeholder.com\u002F288x188\",\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![](https:\u002F\u002Fgithub.com\u002Fjzoom\u002Fimages\u002Fraw\u002Fmaster\u002Flayout4.gif)\n\nVery easy to create you own custom animation:\n```\n\n new Swiper(\n  layout: SwiperLayout.CUSTOM,\n  customLayoutOption: new CustomLayoutOption(\n      startIndex: -1,\n      stateCount: 3\n  ).addRotate([\n    -45.0\u002F180,\n    0.0,\n    45.0\u002F180\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\nThe `CustomLayoutOption` is designed to describe animations.\nIt is very easy to specify every state of items in Swiper.\n\n```\nnew CustomLayoutOption(\n      startIndex: -1,  \u002F\u002F\u002F Which index is the first item of array below      \n      stateCount: 3    \u002F\u002F\u002F array length \n  ).addRotate([        \u002F\u002F rotation of every item \n    -45.0\u002F180,\n    0.0,\n    45.0\u002F180\n  ]).addTranslate([           \u002F\u002F\u002F offset of every item\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## Codes\n\n![Example](https:\u002F\u002Fgithub.com\u002Fjzoom\u002Fimages\u002Fraw\u002Fmaster\u002Fswiper-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\u002F5,\n            child: new Column(\n              mainAxisSize: MainAxisSize.min,\n              children: \u003CWidget>[\n                new SizedBox(\n                  child:  new Container(\n                    child: new Image.network(\"https:\u002F\u002Ffuss10.elemecdn.com\u002Fc\u002Fdb\u002Fd20d49e5029281b9b73db1c5ec6f9jpeg.jpeg%3FimageMogr\u002Fformat\u002Fwebp\u002Fthumbnail\u002F!90x90r\u002Fgravity\u002FCenter\u002Fcrop\u002F90x90\"),\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\nYou can find all custom options here:\n\n>https:\u002F\u002Fgithub.com\u002Fjzoom\u002Fflutter_swiper\u002Fblob\u002Fmaster\u002Fexample\u002Flib\u002Fsrc\u002FExampleCustom.dart\n\n\n\n\n\n","flutter_swiper 是一个适用于 Flutter 的滑动组件，支持多种布局和无限循环滚动。它具备丰富的自定义选项，包括多种内置布局（如水平、垂直、堆叠等）以及分页指示器样式，还引入了类似 Android 的 PageTransformer 功能，允许开发者对页面转换效果进行高度定制。该项目采用 Dart 语言编写，兼容 Android 和 iOS 平台，并且拥有活跃的社区支持。非常适合需要在应用中实现轮播图、教程引导页或任何需要滑动切换内容场景的开发者使用。",2,"2026-06-11 03:21:30","top_language"]