flutter Swiper自定义指示器为直线

如同所示指示器圆点要改为 直线
flutter Swiper自定义指示器为直线_第1张图片
第一种修改方法:
修改方法先定义RectIndicator


class RectIndicator extends StatelessWidget {
  final int position;
  final int count;
  final Color color;
  final Color activeColor;
  final double width;
  final double activeWidth;
  final double height;
  final  double radius;

  RectIndicator({
    Key key,
    this.width: 50.0,
    this.activeWidth: 50.0,
    this.height: 4,
    @required this.position,
    @required this.count,
    this.color: Colors.white,
    this.radius,
    this.activeColor: const Color(0xFF3E4750),
  })  : assert(count != null && position != null),
        super(key: key);

  _indicator(bool isActive) {
    return AnimatedContainer(
      margin: EdgeInsets.symmetric(horizontal: 3.0), //指示器间距
      height: height,
      width: isActive ? activeWidth : width,
      decoration: BoxDecoration(
          color: isActive ? color : activeColor,
          boxShadow: [
            BoxShadow(
                color: Colors.black12,
                offset: Offset(0.0, 2.0),
                blurRadius: 0.0)
          ],
          borderRadius: BorderRadius.circular(radius ?? height / 2.0)),
      duration: Duration(milliseconds: 150),
    );
  }

  _buildPageIndicators() {
    List<Widget> indicatorList = [];
    for (int i = 0; i < count; i++) {
      indicatorList.add(i == position ? _indicator(true) : _indicator(false));
    }
    return indicatorList;
  }

  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: _buildPageIndicators(),
    );
  }
}

Swiper自定义指示器

  List<BannerModel> banners = [];
 return AspectRatio(
        aspectRatio: 16/9, //宽高比
        child:
 Container(
              width: MediaQuery.of(context).size.width,
              child: Swiper(
                  itemCount: banners.length,
                  itemBuilder: (ctx, index) {
                    return Padding(
                        padding: EdgeInsets.symmetric(horizontal: 16),
                        child: GestureDetector(
                            onTap: ()(){ },
                            child: BannerImage(banners[index].image ?? "")));
                  },
                  loop: true,
                  autoplay: true,
                  autoplayDelay: 5000,
                  pagination: SwiperPagination(
                      alignment: Alignment.bottomRight,
                      builder: SwiperCustomPagination(builder:
                          (BuildContext context, SwiperPluginConfig config) {
                        return RectIndicator(
                            position: config.activeIndex,
                            count: banners.length,
                             activeColor: Color(0xFFD8D8D8).withOpacity(0.3),
                            activeColor: Color(0xFFD8D8D8),//未选中 指示器颜色,选中的颜色key为Color
                            width: 7.0,  //指示器宽度
                            activeWidth: 7.0, //选中的指示器宽度
                            radius: 4,//指示器圆角角度
                            height: 2.0); //指示器高度
                      })))));

第二种修改方法 直接使用flukit Swiper 推荐

dependencies:
 flukit: ^1.0.2
import 'package:flukit/flukit.dart';
 return AspectRatio(
        aspectRatio: 16/9, //宽高比
        child:
  Container(
                width: MediaQuery.of(context).size.width,
                child: Swiper.builder(
                  circular: true,
                  interval: const Duration(seconds: 5),
                  childCount: banners.length,
                  indicator: RectangleSwiperIndicator(
                    spacing: 4.0,
                    itemWidth: 7.0,
                    itemHeight: 2.0,
                    itemColor: colorD8D8D8.withOpacity(0.3),
                    itemActiveColor: Colors.white70,
                  ),
                  itemBuilder: (context, index) {
                    return Padding(
                        padding: EdgeInsets.symmetric(horizontal: 16),
                        child: GestureDetector(
                            onTap: () =>
                                homeModel.skipBanner(context, banners[index]),
                            child: BannerImage(banners[index].image ?? "")));
                  },
                ),
              ));
class BannerImage extends StatelessWidget {
  final String url;
  final BoxFit fit;

  BannerImage(this.url, {this.fit: BoxFit.fill});

  @override
  Widget build(BuildContext context) {
    return CachedNetworkImage(
          imageUrl: ImageHelper.wrapUrl(url),
          imageBuilder: (context, imageProvider) => Container(
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(10),
              image: DecorationImage(
                image: imageProvider,
                fit: BoxFit.cover,
              ),
            ),
          ),
          placeholder: (context, url) =>
              Center(child: CupertinoActivityIndicator()),
          errorWidget: (context, url, error) => Icon(Icons.error),
        );
  }
}

你可能感兴趣的:(flutter Swiper自定义指示器为直线)