flutter 图片查看，仿微信

这个虽然是仿微信的，但是以我自己项目里的要求为主，去掉了一些操作。
这个代码铐去就可以用的。

讲下思路：

1. 手势滑动，不松手前以触摸点的坐标为移动，松手了，按滑动速度，以及滑动范围是否超过一半的屏幕作为是否切换图片的依据，否则回滚到原来的位置。
2. 到顶了的处理
3. 文字的投影，防止背景色为白色的字体会看不见
4. 图片以宽度为准，高度可滑动查看(无需求)
5. 缩放（无需求）

手机截图

//图片查看
import 'package:flutter/material.dart';
//import 'dart:async';

/*
 * imgs 格式[{url:'',file:File}]
 * img 当前点击进入的图片
 * width 屏幕宽度
 */

class ViewDialog extends StatefulWidget {
  ViewDialog({Key key, this.img, this.imgs, this.width}) : super(key: key);
  final img;
  final imgs;
  final width;

  @override
  _PageStatus createState() => _PageStatus();
}

class _PageStatus extends State<ViewDialog> {
  var image;
  var w;
  var index = 1;
  var _scrollController;
  var down = 0.0; //触开始的时候的left
  var half = false; //是否超过一半

  last() {
    if(1 == index) {

    }else {
      setState(() {
        image = widget.imgs[index - 2];
        index = index - 1;
      });
    }
  }

  next() {
    if(widget.imgs.length == index) {

    }else {
      setState(() {
        image = widget.imgs[index];
        index = index + 1;
      });
    }
  }

  delete() {
    Navigator.pop(context);
  }

  @override
  void initState() {
    //页面初始化
    super.initState();
    var n = 0;
    var nn;
    widget.imgs.forEach((i) {
      n = n + 1;
      if(i['key'] == widget.img['key']) {
        nn = n;
      }
    });
    print(nn);
    if(nn > 1) {
      print(widget.width);
      _scrollController = ScrollController(
        initialScrollOffset: widget.width * (nn - 1)
      );
    }else {
      _scrollController = ScrollController(
        initialScrollOffset: 0,
      );
    }
    setState(() {
      image = widget.img;
      index = nn;
    });
  }

  nextPage(w) {
    setState(() {
      index = index + 1;
      _scrollController.animateTo(
        (index -1) * w,
        duration: Duration(milliseconds: 200),
        curve: Curves.easeIn,
      );
    });
  }

  lastPage(w) {
    setState(() {
      index = index - 1;
      _scrollController.animateTo(
        (index - 1) * w,
        duration: Duration(milliseconds: 200),
        curve: Curves.easeIn,
      );
    });
  }

  moveEnd(e,w,l) {
    var end = e.primaryVelocity;
    if(end > 10 && index > 1) {
      lastPage(w);
    }else if(end < -10 && index < l){
      nextPage(w);
    }else if(half == true){
      if(down > w/2 && index < l) {
        //右边开始滑动超过一半,则下一张
        nextPage(w);
      }else if(down < w/2 && index > 1){
        lastPage(w);
      }else {
        _scrollController.animateTo(
          (index -1) * w,
          duration: Duration(milliseconds: 200),
          curve: Curves.easeIn,
        );
      }
    }else {
      _scrollController.animateTo(
        (index -1) * w,
        duration: Duration(milliseconds: 200),
        curve: Curves.easeIn,
      );
    }
  }

  imgMove(e,w,l) {
    //down 为起点
    var left = e.position.dx;
    var now = (index -1 ) * w;
    var move = left - down;//移动距离
    if(left - down > w/2 || down - left > w/2) {
      half = true;
    }else {
      half = false;
    }
    _scrollController.jumpTo(now - move);
  }

  Widget list(w,l) {
    List<Widget> array = [];
    widget.imgs.forEach((i) {
      array.add(
        Listener(
          onPointerMove: (e) {
            imgMove(e,w,l);
          },
          onPointerDown: (e) {
            down = e.position.dx;
          },
          child: GestureDetector(
            onTap: (){
              Navigator.pop(context);
            },
            onHorizontalDragEnd: (e) {moveEnd(e,w,l);},
            child: Container(
              width: w,
              child: i['url'] != null ? Image.network(i['url']) : Image.file(i['file']),
            ),
          ),
        ),
      );
    });
    return ListView(
      controller: _scrollController,
      scrollDirection: Axis.horizontal,
      children: array,
    );
  }

  @override
  Widget build(BuildContext context) {
    w = MediaQuery.of(context).size.width;
    var l = widget.imgs.length;
    return Container(
      color: Colors.black,
      child: Stack(
        children: <Widget>[
          list(w,l),
          Positioned(
            top: 20,
            child: Container(
              alignment: Alignment.center,
              width: w,
              child: Text('$index/$l',style: TextStyle(
                decoration: TextDecoration.none,
                color: Colors.white,fontSize: 16,
                fontWeight: FontWeight.w400,
                shadows: [
                  Shadow(color: Colors.black, offset: Offset(1, 1)),
                ],
              ))
            ),
          ),
          Positioned(
            top: 20,
            right: 20,
            child: Container(
              alignment: Alignment.centerLeft,
              width: 20,
              child: GestureDetector(
                onTap: () {delete();},
                child: Icon(Icons.delete,color: Colors.white),
              ),
            ),
          ),
        ],
      ),
    );
  }
}