flutter手把手一起撸一个滑动轮播图

妹子再好看，不是自己的也没啥用。轮子虽然好用，自己不知道原理照样用的心里不踏实。
下面手把手一起来撸一个滑动轮播图。

素面朝天的效果图
撸前须知：这个实现十分以及万分简单，保证不会让你丢一丝一毫的头发。
我们先来分析一下这个简陋的轮播图。简陋轮播图主要有两部分组成：和。他们俩的关系很纯洁也很简单 ✌️ 🤪 ✌️，就像学生时代的爱情一样。
有多少个图片就有多少个指示器
每个图片对应一个指示器，也就是小圆点
所以下面请打开Android撕肚兜。 郑重地敲下两个变量pageCount、currentIndex 恭喜你！解锁了一半的成就！！！然后请充值￥￥￥继续解锁成就。
pageCount：图片个数，由于图片个数和指示器是一一对应的关系，所以用来决定构造多少个指示器（小圆点）——有多少个图片就有多少个指示器。
currentIndex：记录当前被选定的图片和指示器——每个图片对应一个指示器，也就是小圆点。
下面逻辑比较简单，代码中也有详细的注释🙃，其实是懒。

import 'package:flutter/material.dart';
import 'package:money_poket/fantastic/pageIndicator.dart';

class Fans extends StatefulWidget {
  @override
  _FansState createState() => _FansState();
}

class _FansState extends State<Fans> {
  int currentIndex = 0;

  List pics = ['images/page1.jpg', 'images/page2.jpg', 'images/page3.jpg'];

  // currentIndex需要不断地增加，才能在向左滑动的时候显示后一个图片
  increase() {
    if (currentIndex < pics.length - 1)
      setState(() {
        currentIndex++;
      });
    else
      // 在滑动到最后一个图片后，currentIndex便不再增加
      currentIndex = currentIndex;
  }

  // currentIndex需要不断地减少，才能在向右滑动的时候显示前一个图片
  decrease() {
    if (currentIndex > 0)
      setState(() {
        currentIndex--;
      });
    else
      // 在滑动到第一个图片后，currentIndex便不再减少
      currentIndex = 0;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Stack(
          alignment: Alignment.bottomCenter,
          children: <Widget>[
            GestureDetector(
              child: Image.asset(pics[currentIndex]),
              onHorizontalDragEnd: (DragEndDetails details) {
                // 使用details.velocity.pixelsPerSecond.dx来获取滑动距离
                // 向右滑动为正，向左滑动为负
                print('${details.velocity.pixelsPerSecond.dx}');
                if (details.velocity.pixelsPerSecond.dx > 0) {
                  decrease();
                } else if (details.velocity.pixelsPerSecond.dx < 0) {
                  increase();
                }
              },
            ),
            Container(
              width: 100,
              child: PageIndicator(
                currentIndex: currentIndex,
                pageCount: pics.length,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

其实整体逻辑很简单，代码中也做了充分的解释。
由于指示器位于图片之上，所以使用一个Stack,Stack能够让子Widget重叠显示，默认是左上对齐的，这里使用alignment: Alignment.bottomCenter让子Widget纵向沉底，横向居中。
然后需要相应屏幕滑动事件，所以使用了一个GestureDetector，添加一个onHorizontalDragEnd属性，用来监听屏幕滑动，onHorizontalDragEnd的回调函数中传递了一个DragEndDetails类型的参数，使用这个参数的对象方法details.velocity.pixelsPerSecond.dx就能获得用户横向滑动的距离，根据距离的值来判断用户是向左划还是向右划。然后通过增减currentIndex的值来切换图片的指示器。
虽然逻辑很简单，但是解释起来总感觉不够清晰，自己撸一撸就清晰了。嘻嘻。