Flutter Swiper （轮播）

引入flutter_swiper插件

pubspec.yaml文件中引入：

dependencies:
  flutter_swiper: ^1.1.6

作用及使用

多种轮播方式组件

1. 参考网址：flutter_swiper中文文档

2. 官方库地址：flutter_swiper官方库

    import 'package:flutter/material.dart';
    import 'package:flutter_swiper/flutter_swiper.dart';
   
    class FlutterSwiperPage extends StatefulWidget {
      FlutterSwiperPage({Key key}) : super(key: key);
      @override
      _FlutterSwiperPageState createState() => _FlutterSwiperPageState();
    }
   
    class _FlutterSwiperPageState extends State {
      List swiperList = [
        {"src": "http://via.placeholder.com/350x150"},
        {"src": "http://via.placeholder.com/350x150"},
        {"src": "http://via.placeholder.com/350x150"},
        {"src": "http://via.placeholder.com/350x150"},
      ];
   
      // 自定义小圆点样式
      Widget buildPagination(SwiperPluginConfig config) {
        List tiles = [];
        Map swiperMap = swiperList.asMap();
        swiperMap.forEach((k, v) {
          tiles.add(Container(
            height: 20.0,
            width: 20.0,
            margin: EdgeInsets.only(left: 5.0, right: 5.0),
            decoration: BoxDecoration(
                borderRadius: BorderRadius.all(Radius.circular(10.0)),
                color: k == config.activeIndex? Colors.orange:Colors.white),
          ));
        });
        return Padding(
          padding: EdgeInsets.only(bottom: 10.0),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: tiles,
          ),
        );
      }
   
      @override
      Widget build(BuildContext context) {
        return Swiper(
          itemBuilder: (BuildContext context, int index) {
            return Image.network(
              swiperList[index]["src"],
              fit: BoxFit.fill,
            );
          },
          itemCount: swiperList.length,
          pagination: SwiperCustomPagination(
              builder: (BuildContext context, SwiperPluginConfig config) {
            print(config.itemCount);
            return Container(
              alignment: Alignment.bottomCenter,
              child: buildPagination(config),
            );
          }),
          // control: SwiperControl(),
        );
      }
    }

欢迎加群讨论更多flutter相关问题(7天有效）如果失效，可加个人微信拉群