flutter flutter_swiper自定义指示器

效果图

核心代码

pagination: SwiperCustomPagination(
              builder:(BuildContext context, SwiperPluginConfig config){
                return Align(
                  alignment: Alignment(0, 0.85),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: imageList.asMap().keys.map((index){
                      return Container(
                        width: 17.0,
                        height: 3.0,
                        color: index==config.activeIndex? Color(0xFFFF720B):Color(0xFFCDCDCD),
                        margin: EdgeInsets.fromLTRB(4.0, 0, 4.0, 0),
                      );
                    }).toList(),
                  ),
                );
              }
          ),

简单说明

查看文档，自定义指示器需要使用SwiperCustomPagination,并给与了实例代码。

new Swiper(
    ...,
    pagination:new SwiperCustomPagination(
        builder:(BuildContext context, SwiperPluginConfig config){
            return new YourOwnPaginatipon();
        }
    )
);

而返回的可以是任意的组件，config中包含了自定义指示器的所有参数，这里我只用到了activeIndex。

完整代码

import 'package:flutter/material.dart';
import 'package:flutter_swiper/flutter_swiper.dart';
import 'package:jobhunter_flutter/utils/my_toast.dart';

class BannerWidget extends StatelessWidget {

  List imageList;
  double aspectRatio;
  BannerWidget(this.imageList, {this.aspectRatio=375/140});


  @override
  Widget build(BuildContext context) {
    return Container(
      child: AspectRatio(
        aspectRatio: aspectRatio,
        child: Swiper(
          itemBuilder: (BuildContext context, int index){
            return  imageList[index];
          },
          onTap: (int index){
            MyToast.showToast(msg: '点击了第$index个');
          },
          itemCount: imageList.length,
          pagination: SwiperCustomPagination(
              builder:(BuildContext context, SwiperPluginConfig config){
                return Align(
                  alignment: Alignment(0, 0.85),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: imageList.asMap().keys.map((index){
                      return Container(
                        width: 17.0,
                        height: 3.0,
                        color: index==config.activeIndex? Color(0xFFFF720B):Color(0xFFCDCDCD),
                        margin: EdgeInsets.fromLTRB(4.0, 0, 4.0, 0),
                      );
                    }).toList(),
                  ),
                );
              }
          ),
          autoplay: true,
        ),
      ),
    );
  }
}

调用

BannerWidget([ImageLoaderUtil.loadAssetsImagePNG('home/img_banner')]),