Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/best-flutter/flutter_swiper
The best swiper for flutter , with multiple layouts, infinite loop. Compatible with Android & iOS.
https://github.com/best-flutter/flutter_swiper
carousel carousel-plugin flutter flutter-plugin flutter-widget swiper
Last synced: 3 months ago
JSON representation
The best swiper for flutter , with multiple layouts, infinite loop. Compatible with Android & iOS.
- Host: GitHub
- URL: https://github.com/best-flutter/flutter_swiper
- Owner: best-flutter
- License: mit
- Created: 2018-05-19T05:19:41.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2023-04-23T10:38:29.000Z (about 1 year ago)
- Last Synced: 2024-03-18T15:19:39.353Z (3 months ago)
- Topics: carousel, carousel-plugin, flutter, flutter-plugin, flutter-widget, swiper
- Language: Dart
- Homepage:
- Size: 6.1 MB
- Stars: 3,489
- Watchers: 43
- Forks: 700
- Open Issues: 239
-
Metadata Files:
- Readme: README-ZH.md
- Changelog: CHANGELOG-ZH.md
- License: LICENSE
Lists
- awesome-flutter - Swiper - Horizontal, Vertical, Partial swipe with indicator by [Xueliang Ren](https://github.com/jzoom). (Components / Navigation)
- awesome-github-star - flutter_swiper - flutter | 3443 | (Dart)
- awesome-stars-webVueBlog - best-flutter/flutter\_swiper - The best swiper for flutter , with multiple layouts, infinite loop. Compatible with Android & iOS. (Dart / 运维\&DevOps)
README
# flutter_swiper
flutter最强大的siwiper, 多种布局方式，无限轮播，Android和IOS双端适配.
# :sparkles::sparkles: New Features: 分页组件
正在使用这个项目作为分页： [flutter_page_indicator](https://github.com/best-flutter/flutter_page_indicator) .
# :sparkles::sparkles: New Features: 视差
我们在 Swiper 中也像android一样支持了 `PageTransformer`, 只要给Swiper设置一下 `transformer` 属性就行,
这里返回一个被转换的组件给Swiper. 目前仅仅支持 `DEFAULT`布局.
感谢 @FlutterRocks ,棒棒哒 👏.
正在使用这个项目作为视差 [transformer_page_view](https://github.com/best-flutter/transformer_page_view) .
# :sparkles::sparkles: 新功能
[更多](#内建的布局)
# 截图
[更多](#代码)
## 功能路线
1.x.x 功能实现：
- [x] 无限循环轮播
- [x] 控制按钮
- [x] 分页指示器
- [x] 非无限循环模式
- [x] 单元测试
- [x] 例子
- [x] 滚动方向
- [x] 可定制控制按钮
- [x] 可定制分页
- [x] 自动播放
- [x] 控制器
- [x] 外部分页指示器
- [ ] 更多布局方式
## 更新日志
>参考:[CHANGELOG.md](https://github.com/jzoom/flutter_swiper/blob/master/CHANGELOG-ZH.md)
## 目录
- [安装](#安装)
- [基本使用](#基本使用)
- [构建](#构建)
+ [基本构造函数](#基本构造函数)
+ [分页指示器](#分页指示器)
+ [控制按钮](#控制按钮)
+ [控制器](#控制器)
+ [自动播放](#自动播放)
+ [内建的布局](#内建的布局)
+ [一些常用代码示例](#代码)
### 安装
增加
```bash
flutter_swiper : ^lastest_version
```
到项目根目录下的 pubspec.yaml ,并且根目录运行命令行
```bash
flutter packages get
```
### 基本使用
使用命令行创建一个新项目:
```
flutter create myapp
```
编辑 lib/main.dart:
```
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 {
@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(),
),
);
}
}
```
### 构建
#### 基本参数
| 参数 | 默认值 | 描述 |
| :-------------- |:-----------------:| :------------------------|
| scrollDirection | Axis.horizontal |滚动方向，设置为Axis.vertical如果需要垂直滚动 |
| loop | true |无限轮播模式开关 |
| index | 0 |初始的时候下标位置 |
| autoplay | false |自动播放开关. |
| onIndexChanged | void onIndexChanged(int index) | 当用户手动拖拽或者自动播放引起下标改变的时候调用 |
| onTap | void onTap(int index) | 当用户点击某个轮播的时候调用 |
| duration | 300.0 | 动画时间，单位是毫秒 |
| pagination | null | 设置 `new SwiperPagination()` 展示默认分页指示器
| control | null | 设置 `new SwiperControl()` 展示默认分页按钮
#### 分页指示器
分页指示器继承自 `SwiperPlugin`,`SwiperPlugin` 为 `Swiper` 提供额外的界面.设置为`new SwiperPagination()` 展示默认分页.
| 参数 | 默认值 | 描述 |
| :------------ |:---------------:| :-----|
| alignment | Alignment.bottomCenter | 如果要将分页指示器放到其他位置，那么可以修改这个参数 |
| margin | const EdgeInsets.all(10.0) | 分页指示器与容器边框的距离 |
| builder | SwiperPagination.dots | 目前已经定义了两个默认的分页指示器样式： `SwiperPagination.dots` 、 `SwiperPagination.fraction`，都可以做进一步的自定义. |
如果需要定制自己的分页指示器，那么可以这样写：
```
new Swiper(
...,
pagination:new SwiperCustomPagination(
builder:(BuildContext context, SwiperPluginConfig config){
return new YourOwnPaginatipon();
}
)
);
```
#### 控制按钮
控制按钮组件也是继承自 `SwiperPlugin`,设置 `new SwiperControl()` 展示默认控制按钮.
| 参数 | 默认值 | 描述 |
| :------------ |:---------------:| :-----|
| iconPrevious | Icons.arrow_back_ios | 上一页的IconData |
| iconNext | Icons.arrow_forward_ios | 下一页的IconData |
| color | Theme.of(context).primaryColor | 控制按钮颜色 |
| size | 30.0 | 控制按钮的大小 |
| padding | const EdgeInsets.all(5.0) | 控制按钮与容器的距离 |
#### 控制器(SwiperController)
`SwiperController` 用于控制 Swiper的`index`属性, 停止和开始自动播放. 通过 `new SwiperController()` 创建一个SwiperController实例，并保存，以便将来能使用。
| 方法 | 描述 |
| :------------ |:-----|
| void move(int index, {bool animation: true}) | 移动到指定下标，设置是否播放动画|
| void next({bool animation: true}) | 下一页 |
| void previous({bool animation: true}) | 上一页 |
| void startAutoplay() | 开始自动播放 |
| void stopAutoplay() | 停止自动播放 |
#### 自动播放
| 参数 | 默认值 | 描述 |
| :------------ |:---------------:| :-----|
| autoplayDely | 3000 | 自动播放延迟毫秒数. |
| autoplayDisableOnInteraction | true | 当用户拖拽的时候，是否停止自动播放. |
## 内建的布局
```
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,
)
```
构建你自己的动画十分简单:
```
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)
```
`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)
])
```
## 代码
```
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: [
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))
),
```
这里可以找到所有的定制选项
>https://github.com/jzoom/flutter_swiper/blob/master/example/lib/src/ExampleCustom.dart