Flutter练习：实现自定义的分页指示器

最新推荐文章于 2025-03-11 22:17:01 发布

田螺与呆瓜

最新推荐文章于 2025-03-11 22:17:01 发布

阅读量5.4k

点赞数

文章标签：前端 flutter

本文链接：https://blog.youkuaiyun.com/weixin_44486516/article/details/123394792

版权

先贴一下运行效果

在开发过程中往往会遇到需求是这样的，我们要实现的效果如图二所示。

项目中使用的轮播图插件是：

通过查阅Swipe_pagination的源代码可知，目前只提供了FractionPaginationBuilder（百分数类型的，例如：1/5）、RectSwipePaginationBuilder(矩形)、DotSwiperPaginationBuilder（圆点）。像我们目前的需求就是做带圆角的，选中的是带圆角的圆柱，未选中的是圆点。

最终通过复制修改代码（swipe_pagination.dart）实现的功能

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

class SquareSwiperPaginationBuilder extends SwiperPlugin {
  ///color when current index,if set null , will be Theme.of(context).primaryColor
  fina