Flutter实现轮播效果

1.导包

在pubspec.yaml中导入最新的flutter_swiper包，最新版本是1.1.6.

flutter_swiper: ^1.1.6

2.使用

预先准备几张图片路径，这是使用wan安卓中轮播图的API

List<Image> imgs = [
    Image.network(
      "https://wanandroid.com/blogimgs/8690f5f9-733a-476a-8ad2-2468d043c2d4.png",
      fit: BoxFit.cover,
    ),
    Image.network(
        "https://www.wanandroid.com/blogimgs/62c1bd68-b5f3-4a3c-a649-7ca8c7dfabe6.png",
        fit: BoxFit.cover),
    Image.network(
        "https://www.wanandroid.com/blogimgs/50c115c2-cf6c-4802-aa7b-a4334de444cd.png",
        fit: BoxFit.cover),
    Image.network(
        "https://www.wanandroid.com/blogimgs/90c6cc12-742e-4c9f-b318-b912f163b8d0.png",
        fit: BoxFit.cover)
  ];

接下来通过flutter_swiper的几个核心属性配置轮播图

child: Swiper(
            itemWidth: double.infinity,//宽度
            itemHeight: 200,//高度，如果Swiper外层爆过了其他容器，并且也设置了宽高，那么itemWidth和itemHeight是没有效果的
            itemCount: imgs.length,//轮播图的数量
            itemBuilder: (BuildContext context, int index) {
              return imgs[index];
            },//使用预先定义好的Images列表构建轮播项
            autoplay: true,//是否自动轮播
            pagination: new SwiperPagination(builder: SwiperPagination.dots),//指示器样式，默认是小圆点，可以设置fraction、rect等形式
            control: new SwiperControl(),//两侧箭头
          ),

看一下效果