flutter实现轮播图效果

1.在项目目录下的pubspec.yaml添加flutter_swiper依赖，然后点击Pub get

flutter_swiper: ^1.1.4

2.使用如下：

import 'package:flutter/material.dart';
import 'package:flutter_swiper/flutter_swiper.dart';

class SwiperDefaultPage extends StatefulWidget {
  @override
  _SwiperDefaultPageState createState() => _SwiperDefaultPageState();
}

class _SwiperDefaultPageState extends State<SwiperDefaultPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('SwiperTest'),
      ),
      body: Column(
        children: <Widget>[
          Padding(padding: EdgeInsets.all(10.0)),
          buildStyle1()
        ],
      ),
    );
  }

  //banner 图
  Widget buildStyle1() {
    return Container(
      height: 200.0,
      child: Swiper(
        // 横向
        scrollDirection: Axis.horizontal,
        // 布局构建
        itemBuilder: (BuildContext context, int index) {
          return Image.asset("resource/images/my_image.jpg", fit: BoxFit.fill);
        },
        //条目个数
        itemCount: 6,
        // 自动翻页
        autoplay: true,
        // 分页指示
        pagination: _buildPlugin(),
        // pagination: _buildSwiperPagination(),
        // pagination: _buildNumSwiperPagination(),
        //点击事件
        onTap: (index) {
          print(" 点击 " + index.toString());
        },
        // 相邻子条目视窗比例
        viewportFraction: 1,
        // 用户进行操作时停止自动翻页
        autoplayDisableOnInteraction: true,
        // 无限轮播
        loop: true,
        //当前条目的缩放比例
        scale: 1,
      ),
    );
  }

  //默认圆点指示器
  _buildPlugin() {
    return SwiperPagination();
  }

  //自定圆点分页指示器
  _buildSwiperPagination() {
    // 分页指示器
    return SwiperPagination(
      //指示器显示的位置 Alignment.bottomCenter 底部中间
      alignment: Alignment.bottomCenter,
      // 距离调整
      margin: const EdgeInsets.only(bottom: 5),
      // 指示器构建
      builder: DotSwiperPaginationBuilder(
          // 点之间的间隔
          space: 2,
          // 没选中时的大小
          size: 6,
          // 选中时的大小
          activeSize: 12,
          // 没选中时的颜色
          color: Colors.black54,
          //选中时的颜色
          activeColor: Colors.white),
    );
  }

  //自定义分页指示器
  _buildNumSwiperPagination() {
    return SwiperPagination(
      //指示器显示的位置
      alignment: Alignment.bottomCenter, // 位置 Alignment.bottomCenter 底部中间
      // 距离调整
      margin: const EdgeInsets.only(bottom: 5),
      // 指示器构建
      builder: FractionPaginationBuilder(
          // 选中时字体大小
          activeFontSize: 14,
          // 字体大小
          fontSize: 14,
          // 字体颜色
          color: Colors.red,
          //选中时的颜色
          activeColor: Colors.blue),
    );
  }
}

效果图：

3.基本参数说明：