久负盛名的flutter_swiper pub上在三年前就停止更新了 也没看到支持空安全的版本 今天偶然间浏览发现一个名叫card_swiper的首页介绍和Flutter_swiper一模一样 card_swiper | Flutter Package (flutter-io.cn)

一. 引入插件

dependencies:
  card_swiper: ^2.0.3

二. 简单封装一下

class ComSwiper extends StatelessWidget {
  ///上下文
  final BuildContext context;

  ///轮播图滚动列表
  final List<String> bannerList;

  ///高度可定制
  final double widgetHeight = 160;

  ///返回的item的定制
  final Function item;

  ///是否自动播放
  final bool autoPlay;

  ///点击的回调
  final Function? onTap;

  ///指点杆的布局
  final Alignment paginationAlignment;

  ///指点杆距离组件的距离
  final EdgeInsetsGeometry? paginationMargin;

  ///是否显示指点杆
  final bool showSwiperPagination;

  ///构造指点杆
  final SwiperPlugin? paginationBuilder;

  const ComSwiper(
      {Key? key,
      required this.bannerList,
      this.autoPlay = true,
      required this.item,
      required this.context,
      this.showSwiperPagination = true,
      this.onTap,
      this.paginationAlignment = Alignment.bottomRight,
      this.paginationMargin,
      this.paginationBuilder})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      height: ScreenHelper.width(widgetHeight),
      child: _swiper(),
    );
  }

  Widget _swiper() {
    return Swiper(
      onTap: (index) => {
        if (onTap != null) {onTap!(bannerList[index])}
      },
      itemCount: bannerList.length,
//如果只有一个不自动播放,多个按需求是否播放
      autoplay: bannerList.length != 1 ? autoPlay : false,
      itemBuilder: (BuildContext context, int index) => item(bannerList[index]),
///如果只有一个不显示指示器或者按需显示指示器
      pagination: (bannerList.length != 1) && showSwiperPagination
          ? SwiperPagination(
              alignment: paginationAlignment,
              margin: paginationMargin ??
                  EdgeInsets.only(
                      right: ScreenHelper.width(20),
                      bottom: ScreenHelper.width(20)),
              builder: paginationBuilder ??
                  RectSwiperPaginationBuilder(
                      color: Theme.of(context).textTheme.caption?.color,
                      activeColor: Theme.of(context).indicatorColor,
                      size: Size(ScreenHelper.width(12), ScreenHelper.width(12)),
                      activeSize: Size(ScreenHelper.width(18), ScreenHelper.width(12))))
          : null,
    );
  }
}

三. 指点杆的种类有些分散不好一眼就看出来 所以我整合了一下

class ComPaginationBuilder {
  ///原点形 指示器
  ///[activeColor]选中的颜色
  ///[color]默认颜色
  ///[size]默认的大小
  ///[activeSize]选中的大小
  ///[space] 间距
  static dot({
    activeColor,
    color,
    size = 10.0,
    activeSize = 10.0,
    space = 3.0,
  }) {
    return DotSwiperPaginationBuilder(
        activeSize: activeSize,
        activeColor: activeColor,
        color: color,
        size: size,
        space: space);
  }

  ///带数字分页的指示器
  ///效果  1/4
  ///  ///[activeColor]选中的颜色
  //   ///[color]默认颜色
  //   ///[fontSize]默认的大小
  //   ///[activeFontSize]选中的大小
  static fraction({
    color,
    fontSize = 20.0,
    activeColor,
    activeFontSize = 35.0,
  }) {
    return FractionPaginationBuilder(
        color: color,
        fontSize: fontSize,
        activeColor: activeColor,
        activeFontSize: activeFontSize);
  }

  ///方块指示器
  ///  ///[activeColor]选中的颜色
  //   ///[color]默认颜色
  //   ///[fontSize]默认的大小
  //   ///[activeFontSize]选中的大小

  static rect({
    activeColor,
    color,
    size = const Size(12.0, 12.0),
    activeSize = const Size(18.0, 12.0),
    space = 3.0
  }) {
    return RectSwiperPaginationBuilder(
        activeSize: activeSize,
        activeColor: activeColor,
        color: color,
        size: size,
        space: space);
  }

  ///圆形的指示器 根据上面那个方块改的
  ///  ///[activeColor]选中的颜色
  //   ///[color]默认颜色
  //   ///[fontSize]默认的大小
  //   ///[activeFontSize]选中的大小

  static circle({
    activeColor,
    color,
    size = const Size(12.0, 12.0),
    activeSize = const Size(18.0, 12.0),
    space = 3.0,
  }) {
    return CirCleSwiperPaginationBuilder(
        activeSize: activeSize,
        activeColor: activeColor,
        color: color,
        size: size,
        space: space);
  }
}

四. 你可以继承SwiperPlugin 创建自己的指示器样式

五. 使用

                   ComSwiper(
                        paginationBuilder: ComPaginationBuilder.circle(),
                        bannerList: [
                          "https://img0.baidu.com/it/u=2862534777,914942650&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500",
                          "https://img0.baidu.com/it/u=2862534777,914942650&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500",
                          "https://img0.baidu.com/it/u=2862534777,914942650&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500",
                          "https://img0.baidu.com/it/u=2862534777,914942650&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500",
                        ],
                        onTap: (index) {
                          debugPrint("我点击了第生死时速$index");
                        },
                        item: (item) => Padding(
                              padding: EdgeInsets.all(ScreenHelper.width(18)),
                              child: ClipRRect(
                                borderRadius: BorderRadius.all(
                                  Radius.circular(ScreenHelper.width(6)),
                                ),
                                child: CaCheImageWidget(imageUrl: item),
                              ),
                            ),
                        context: context),