Flutter新增组件实现有数字页码【商品轮播图】

在pubspec引入flutter_swiper_null_safety: ^1.0.2

swiper主页面：

class MedicineDetail extends StatefulWidget {
const MedicineDetail({Key? key}) : super(key: key);

@override
  State<MedicineDetail> createState() => _MedicineDetailState();
}

class _MedicineDetailState extends State<MedicineDetail> {
@override
  Widget build(BuildContext context) {
return Scaffold(
      appBar: null,
      body: Container(
        child: Column(
          children: [getMedicineDetailPic()],
        ),
      ),
    );
  }

  Widget getMedicineDetailPic() {
    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"
    ];
return Container(
      margin: Zcss.marginTop40,
      child: Column(
        children: <Widget>[
ConstrainedBox(
              constraints: BoxConstraints.loose(
new Size(MediaQuery.of(context).size.width, 280.0)),
              child: Swiper(
                outer: false,
                autoplay: true,
// 分页指示
                pagination: buildSwiperPagination(),
                autoplayDelay: 3000,
//duration:5000,
                itemBuilder: (c, i) {
return CachedNetworkImage(
                    imageUrl: "${swiperDataList[i]}",
// placeholder: (context, url) => new CircularProgressIndicator(backgroundColor: Colors.red[100],),
                    errorWidget: (context, url, error) => new Icon(Icons.error),
                    fit: BoxFit.cover,
                  );
                },
                itemCount: swiperDataList == null ? 0 : swiperDataList.length,
              )),
        ],
      ),
    );
  }

//自定义分页指示器
  buildSwiperPagination() {
// 分页指示器
    return SwiperPagination(
//指示器显示的位置
      alignment: Alignment.bottomRight, // 位置 Alignment.bottomCenter 底部中间
      // 距离调整
      margin: const EdgeInsets.fromLTRB(0, 0, 30, 21),
// 指示器构建
      builder: FractionPaginationWithBackgroundBuilder(
// 选中时字体大小
          activeFontSize: 14,
// 字体大小
          fontSize: 14,
// 字体颜色
          color: Colors.white,
//选中时的颜色
          activeColor: Colors.white),
    );
  }
}

组件页面代码：

import 'package:flutter/material.dart';
import 'package:flutter_swiper_null_safety/flutter_swiper_null_safety.dart';
class FractionPaginationWithBackgroundBuilder extends SwiperPlugin {
  ///color ,if set null , will be Theme.of(context).scaffoldBackgroundColor
  final Color color;

  ///color when active,if set null , will be Theme.of(context).primaryColor
  final Color activeColor;

  font size
  final double fontSize;

  ///font size when active
  final double activeFontSize;


  const FractionPaginationWithBackgroundBuilder(
      {required this.color,
        this.fontSize: 20.0,
        required this.activeColor,
        this.activeFontSize: 35.0});

  @override
  Widget build(BuildContext context, SwiperPluginConfig config) {
    ThemeData themeData = Theme.of(context);
    Color activeColor = this.activeColor ?? themeData.primaryColor;
    Color color = this.color ?? themeData.scaffoldBackgroundColor;

    if (Axis.vertical == config.scrollDirection) {
      return  Container(
        padding: EdgeInsets.all(8),
        decoration:  BoxDecoration(
          borderRadius:  BorderRadius.all( Radius.circular(10.0)),
          image:  DecorationImage(
            image: ExactAssetImage("images/show_num.png"),
          ),
        ),
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            Text(
              "${config.activeIndex + 1}",
              style: TextStyle(color: activeColor, fontSize: activeFontSize),
            ),
            Text(
              "/",
              style: TextStyle(color: color, fontSize: fontSize),
            ),
            Text(
              "${config.itemCount}",
              style: TextStyle(color: color, fontSize: fontSize),
            )
          ],
        ),
      );
    } else {
      return  Container(
        padding: EdgeInsets.only(top: 3,left: 8,bottom: 3,right: 8),
        decoration:  BoxDecoration(
          color: Colors.grey.withAlpha((200*0.7).toInt()),
          borderRadius:  BorderRadius.all( Radius.circular(20.0)),
          // image:  DecorationImage(
          //   image: ExactAssetImage("assets/images/icon/map_min.png"),
          // ),
        ),
        child: Row(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            Text(
              "${config.activeIndex + 1}",
              style: TextStyle(color: activeColor, fontSize: activeFontSize),
            ),
            Text(
              " / ${config.itemCount}",
              style: TextStyle(color: color, fontSize: fontSize),
            )
          ],
        ),
      );
    }
  }
}