flutter_swiper
flutter最强大的siwiper, 多种布局方式,无限轮播,Android和IOS双端适配.

先放上github上的几张图看一下效果。

安装
增加
flutter_swiper: ^1.0.6 //请在pub上查看最新版本,由于最新版本1.0.6没有适配flutter2.0,择安装 flutter_swiper_null_safety: ^1.0.2 在flutter3.0上有时候报错可以续选flutter_swiper_view 1.1.8

首先非常感谢作者开源的这个库,帮助大家提升了开发效率。

flutter_swiper这个库的最后一次提交距离现在已经有三年时间了,在这三年的时间中,Flutter 发展非常快,比如说 dart 2.12 开始支持的空安全,dart 2.17 开始支持枚举成员变量,Flutter 3,以及 AndroidX 的支持等等。

为了支持空安全,我也使用过另外一个作者维护的 card_swiper,Flutter 3 发布后,这个库也没能及时更新,并且我发现它存在 SwiperPagination.rect 指示器不显示的 bug。


可能以后大家维护的这份代码也会弃坑,所以建议大家都尝试一下:如何自己维护代码,并把它发布到 pub.dev 上。

这样,无论是这个库还是其它库,作者弃坑了,或者长时间不维护,我们都可以自己来维护。

我想这也是开源项目的魅力吧。

到项目根目录下的 pubspec.yaml ,并且根目录运行命令行

flutter packages get
cached_network_image: ^3.0.0,

Flutter Android跳转蓝牙权限_分页

基本使用

import 'package:flutter/material.dart';
import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter_swiper_null_safety/flutter_swiper_null_safety.dart';

class SettingsPage extends StatefulWidget {
  _IndexPageState createState() => _IndexPageState();
}

class _IndexPageState extends State<SettingsPage> {
 // late List listData;
  List swiperDataList=["https://img.ivsky.com/img/tupian/li/201810/30/motianlun-005.jpg",
    "https://img.ivsky.com/img/tupian/li/201811/06/xiaosongshu-002.jpg",
    "https://img.ivsky.com/img/tupian/li/201811/06/ludeng-006.jpg"];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('轮播图'),
      ),
      body: Column(
        children: <Widget>[
          ConstrainedBox(
              child: Swiper(
                outer: false,
                autoplay:true,
                autoplayDelay:3000,
                //duration:5000,
                itemBuilder: (c, i) {
                    return CachedNetworkImage(
                      imageUrl: "${swiperDataList[i]}",
                      placeholder: (context, url) => new CircularProgressIndicator(),
                      errorWidget: (context, url, error) => new Icon(Icons.error),
                      fit: BoxFit.cover,
                    );
                },
                pagination:
                new SwiperPagination(
                  margin: new EdgeInsets.all(5.0),
                    builder: DotSwiperPaginationBuilder(
                      color: Colors.blue,
                      activeColor: Colors.red,
                    ),

                ),
                itemCount: swiperDataList == null ? 0 : swiperDataList.length,
              ),
              constraints:
              new BoxConstraints.loose(new Size(MediaQuery.of(context).size.width, 180.0))),

        ],
      ),
    );
  }
}

Flutter Android跳转蓝牙权限_分页_02

Swiper基本参数

参数

默认值

描述

scrollDirection

Axis.horizontal

滚动方向,设置为Axis.vertical如果需要垂直滚动

loop

true

无限轮播模式开关

index

0

初始的时候下标位置

autoplay

false

自动播放开关.

autoplayDelay

3000

自动播放延迟毫秒数.

autoplayDiableOnInteraction

true

当用户拖拽的时候,是否停止自动播放.

onIndexChanged

void onIndexChanged(int index)

当用户手动拖拽或者自动播放引起下标改变的时候调用

onTap

void onTap(int index)

当用户点击某个轮播的时候调用

duration

300.0

动画时间,单位是毫秒

pagination

null

设置 new SwiperPagination() 展示默认分页指示器

control

null

设置 new SwiperControl() 展示默认分页按钮

分页指示器 pagination

分页指示器继承自 SwiperPlugin,SwiperPlugin 为 Swiper 提供额外的界面.设置为new SwiperPagination() 展示默认分页.

参数

默认值

描述

alignment

Alignment.bottomCenter

如果要将分页指示器放到其他位置,那么可以修改这个参数

margin

const EdgeInsets.all(10.0)

分页指示器与容器边框的距离

builder

SwiperPagination.dots

目前已经定义了两个默认的分页指示器样式: SwiperPagination.dots 、 SwiperPagination.fraction,都可以做进一步的自定义.

Flutter Android跳转蓝牙权限_android_03

控制按钮 control

控制按钮组件也是继承自 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()

停止自动播放

内建的布局

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QLZW8mVs-1573730731358)(https://github.com/jzoom/images/raw/master/layout1.gif)]

Flutter Android跳转蓝牙权限_默认值_04

Flutter Android跳转蓝牙权限_android_05

Flutter Android跳转蓝牙权限_默认值_06

Flutter Android跳转蓝牙权限_android_07