flutter banner轮播图

柔光的暖阳◎ 2021-08-19 16:40 556阅读 0赞

仓库地址：

`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,
          ),
        );
      }

效果图如下：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZGFpbG9uZ19ibG9n_size_16_color_FFFFFF_t_70]

> 当然还有很多好玩的效果，建议直接上github上进行查看，这里就暂时只用到现在这些功能。

--------------------

adTime：  
更多资源请访问：

[超详细图文搭建个人免费博客][Link 1]

关注「蛇崽网盘教程资源」公众号 ，在微信后台回复「领取资源」，获取IT资源200G干货大全。

在微信后台回复「130个小程序」，即可免费领取享有导入就能跑的微信小程序

在微信后台回复「Flutter移动电商」，即可免费领取Flutter移动电商系列全套  
![在这里插入图片描述][20181106111014905.png]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZGFpbG9uZ19ibG9n_size_16_color_FFFFFF_t_70]: /images/20210529/7b962f8880e94c29a805288b025e4986.png
[Link 1]: https://blog.csdn.net/xudailong_blog/article/details/78762262
[20181106111014905.png]: /images/20210529/955bdc49fc9b43c0b1160456306e3454.png