博客资源Flutter

flutter_swiper

2019-08-01  本文已影响26人  想放假的程序媛

轮播组件flutter_swiper,好用!

git地址:https://github.com/best-flutter/flutter_swiper/blob/master/README-ZH.md

基本参数介绍及使用,参考:https://blog.csdn.net/u011272795/article/details/82776861

使用本地资源文件轮播,

static const swiperDataList = [
    'images/bg_guide01.png',
    'images/bg_guide02.png',
    'images/bg_guide03.png',
    'images/bg_guide04.png',
    'images/bg_welcome.png',
  ];
child: Swiper(
        itemCount: swiperDataList.length,
        itemBuilder: (BuildContext context, int index) {
          return Container(
            child: Image.asset(
              '${swiperDataList[index]}',
              fit: BoxFit.fill,
            ),
          );
        },
        pagination: SwiperPagination(
          builder:DotSwiperPaginationBuilder(
            color: Colors.grey,
            activeColor: Colors.black12,
            size: 6,
            activeSize: 6
          )
        ),
        autoplay: true,
        autoplayDisableOnInteraction: true,
      ),

其中,SwiperPagination()修改轮播组件下方的小圆点样式。
修改后的效果图如下所示:

Screenshot_2019-08-01-10-36-50.png
上一篇下一篇

猜你喜欢

热点阅读