flutter banner輪播圖

倉庫地址：

https://pub.dev/packages/flutter_swiper

加yaml文件中加入依賴，目前可能爲比較好用的banner輪播圖

flutter_swiper 1.1.6

組件使用：

還是直接上代碼來得快一些，

  Widget _buildBanner(){
    return Container(
      width: double.infinity,
      height: 133,
      margin: EdgeInsets.all(MyDimenRes.dp_base_left),
      child: Swiper(
        itemBuilder: _swiperBuilder,
        itemCount: bannerList.length,
        pagination: new SwiperPagination(
            builder: DotSwiperPaginationBuilder(
              color: Colors.black54,
              activeColor: Colors.white,
            )),
//        control: new SwiperControl(),
        scrollDirection: Axis.horizontal,
        autoplay: true,
//        onTap: (index) => print('點擊了第$index個'),
        onTap: (index){
          String url = bannerList[index].url;
          if (url!=null && url.length>0) {
            String urlType = bannerList[index].urlType;
            if (urlType == '1') {
              Util.jump2TeacherCourseDetailMainPage(context,bannerList[index].url);
            }else {
              // 跳轉到瀏覽器外部
              jump2Broswer(bannerList[index].url);
            }
          }
        },
      )
    );
  }

  Widget _swiperBuilder(BuildContext context, int index) {
    return ClipRRect(
      borderRadius: BorderRadius.circular(10),
      child: FadeInImage.assetNetwork(
        placeholder: Util.getImgPath(Constant.place_rectangle_img),
        image: Util.getNetImg(bannerList[index].img),
        fit: BoxFit.cover,
      ),
    );
  }

效果圖如下：

當然還有很多好玩的效果，建議直接上github上進行查看，這裏就暫時只用到現在這些功能。

---

adTime：
更多資源請訪問：

超詳細圖文搭建個人免費博客

關注「蛇崽網盤教程資源」公衆號 ，在微信後臺回覆「領取資源」，獲取IT資源200G乾貨大全。

在微信後臺回覆「130個小程序」，即可免費領取享有導入就能跑的微信小程序

在微信後臺回覆「Flutter移動電商」，即可免費領取Flutter移動電商系列全套