Flutter Swiper轮播插件使用详解

1.常规轮播

效果图

轮播.gif

关键代码

/// 首页轮播组件编写
class SwiperDiy extends StatelessWidget {
  final List swiperDataList;

  SwiperDiy({Key key, this.swiperDataList}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      width: ScreenUtil.getInstance().setWidth(750),
      height: ScreenUtil.getInstance().setHeight(320),
      child: Swiper(
        scrollDirection: Axis.horizontal,
        // 横向
        itemBuilder: (BuildContext context, int index) {
          return InkWell(
              onTap: () {
                //轮播图点击跳转详情页
                Toast.show('您点击了${swiperDataList[index]}');
              },
              child: Container(
                decoration: BoxDecoration(
                    //color: Colors.blue,
                    borderRadius: BorderRadius.circular(10),
                    image: DecorationImage(
                      image: NetworkImage("${swiperDataList[index]}"),
                      fit: BoxFit.fill,
                    )),
              ));
        },
        itemCount: swiperDataList.length,
        //pagination: new SwiperPagination(),
        autoplay: true,
        viewportFraction: 0.8,
        // 当前视窗展示比例 小于1可见上一个和下一个视窗
        scale: 0.8, // 两张图片之间的间隔
      ),
    );
  }
}

使用

  List _bannerList = [
    "http://fdfs.xmcdn.com/group62/M06/16/15/wKgMZ1z3KxLQ2dbFAAHjQHda8Wc760.jpg",
    "http://fdfs.xmcdn.com/group55/M0B/24/C0/wKgLdVxr18TyJ2nlAAIJVSk2i_o322.jpg",
    "http://fdfs.xmcdn.com/group63/M0A/99/95/wKgMaFz_RD-BDyFjAAIO0iRtj0U176.jpg",
    "http://fdfs.xmcdn.com/group61/M00/DD/05/wKgMZl0DDduydvLKAAHuFI7s-2U365.jpg",
  ];
// 轮播图
SwiperDiy(swiperDataList: _bannerList),

报错补充及解决方案

• 当 Swpier目录只有一个的时候，会出现自动创建多个Item

  
  效果图

原因：

loop: true,//默认是true

解决方案：

loop: false,

• 定位到某个具体的Item子项

//1.指定Controller
SwiperController controller;
controller: controller,
//2.跳转采用`controller.move`
Future.delayed(Duration(milliseconds: 200), () {
  controller.move(selectIndex, animation: false);
});

• 自定义指示器(小圆点)

pagination: new SwiperPagination(
      builder: DotSwiperPaginationBuilder(
      color: Colors.white.withOpacity(0.5),
      activeColor: Colors.white,
    ),
    margin: EdgeInsets.all(ScreenUtil().setWidth(10))
  ),

效果图：

image.png