久負(fù)盛名的flutter_swiper pub上在三年前就停止更新了 也沒看到支持空安全的版本 今天偶然間瀏覽發(fā)現(xiàn)一個名叫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;

  ///點擊的回調(diào)
  final Function? onTap;

  ///指點桿的布局
  final Alignment paginationAlignment;

  ///指點桿距離組件的距離
  final EdgeInsetsGeometry? paginationMargin;

  ///是否顯示指點桿
  final bool showSwiperPagination;

  ///構(gòu)造指點桿
  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]默認(rèn)顏色
  ///[size]默認(rèn)的大小
  ///[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);
  }

  ///帶數(shù)字分頁的指示器
  ///效果  1/4
  ///  ///[activeColor]選中的顏色
  //   ///[color]默認(rèn)顏色
  //   ///[fontSize]默認(rèn)的大小
  //   ///[activeFontSize]選中的大小
  static fraction({
    color,
    fontSize = 20.0,
    activeColor,
    activeFontSize = 35.0,
  }) {
    return FractionPaginationBuilder(
        color: color,
        fontSize: fontSize,
        activeColor: activeColor,
        activeFontSize: activeFontSize);
  }

  ///方塊指示器
  ///  ///[activeColor]選中的顏色
  //   ///[color]默認(rèn)顏色
  //   ///[fontSize]默認(rèn)的大小
  //   ///[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);
  }

  ///圓形的指示器 根據(jù)上面那個方塊改的
  ///  ///[activeColor]選中的顏色
  //   ///[color]默認(rèn)顏色
  //   ///[fontSize]默認(rèn)的大小
  //   ///[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 創(chuàng)建自己的指示器樣式

五. 使用

                   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),