flutter 图片查看组件、支持缩放、轮转

class NinePicture<T> extends PopupRoute<T> {
  final String barrierLabel;
  final List picList;
  final int index;
  int startX;
  int endX;

  NinePicture(this.picList, this.index, {this.barrierLabel});

  @override
  Duration get transitionDuration => Duration(milliseconds: 2000);

  @override
  @override
  Color get barrierColor => Colors.black54;

  @override
  bool get barrierDismissible => true;

  AnimationController _animationController;

  @override
  AnimationController createAnimationController() {
    assert(_animationController == null);
    _animationController =
        BottomSheet.createAnimationController(navigator.overlay);
    return _animationController;
  }

  @override
  Widget buildPage(BuildContext context, Animation<double> animation,
      Animation<double> secondaryAnimation) {
    return MediaQuery.removePadding(
      removeTop: true,
      context: context,
      child: GestureDetector(
        child: AnimatedBuilder(
          animation: animation,
          builder: (BuildContext context, Widget child) => GestureDetector(
                onTap: () {
                  Navigator.pop(context);
                },
                child: _PictureWidget(picList, index),
              ),
        ),
      ),
    );
  }
}

class _PictureWidget extends StatefulWidget {
  final List picList;
  final int index;

  _PictureWidget(this.picList, this.index);

  @override
  State createState() {
    return _PictureWidgetState();
  }
}

class _PictureWidgetState extends State<_PictureWidget> with TickerProviderStateMixin{
  int startX = 0;
  int endX = 0;
  int index = 0;

  double _scale = 1.0;
  double _tmpScale = 1.0;
  double _moveX = 0.0;
  double _tmpMoveX = 0.0;
  double _moveY = 0.0;
  double _tmpMoveY = 0.0;
  double _rotation = 0.0;
  double _tmpRotation = 0.0;

  Offset _tmpFocal = Offset.zero;

  AnimationController _animationController;
  Animation<double> _values;

  @override
  void initState() {
    // TODO: implement initState

    _animationController =
        AnimationController(vsync: this, duration: Duration(milliseconds: 120));
    // Tween 将动画的 0 - 1 的值映射到我们设置的范围内
    _values = Tween(begin: 1.0, end: 0.0).animate(_animationController);
    _animationController.addListener(() {
      setState(() {
        // 通过动画逐帧还原位置
        _moveX = _tmpMoveX * _values.value;
        _moveY = _tmpMoveY * _values.value;
        _scale = (_tmpScale - 1) * _values.value + 1;
        _rotation = _tmpRotation * _values.value;
      });
    });

    super.initState();
    index = widget.index;
  }

  @override
  void dispose() {
    _animationController?.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    Matrix4 matrix4 = Matrix4.identity()
      ..scale(_scale, _scale)
      ..translate(_moveX, _moveY)
      ..rotateZ(_rotation);
    return new Material(
      color: Colors.transparent,
      child: new Container(
        width: double.infinity,
        child: Stack(
          children: <Widget>[
            GestureDetector(
              child: Center(
                child:Transform(
                    alignment: FractionalOffset.center,
                    transform: matrix4,
                    child: CachedNetworkImage(
                      imageUrl: widget.picList[index],
                      fit: BoxFit.cover,
                    )
                ),
              ),
              onHorizontalDragDown: (detail) {
                startX = detail.globalPosition.dx.toInt();
              },
              onHorizontalDragUpdate: (detail) {
                endX = detail.globalPosition.dx.toInt();
              },
              onHorizontalDragEnd: (detail) {
                _getIndex(endX - startX);
                setState(() {});
              },
              onHorizontalDragCancel: () {},
                onDoubleTap: () {
                  if (!_animationController.isAnimating) {
                    _tmpMoveX = _moveX;
                    _tmpMoveY = _moveY;
                    _tmpScale = _scale;
                    _tmpRotation = _rotation;
                    _animationController.reset();
                    _animationController.forward();
                  }
                },
                onScaleStart: (details) {
                  if (!_animationController.isAnimating) {
                    _tmpFocal = details.focalPoint;
                    _tmpMoveX = _moveX;
                    _tmpMoveY = _moveY;
                    _tmpScale = _scale;
                    _tmpRotation = _rotation;
                  }
                },
                onScaleUpdate: (details) {
                  if (!_animationController.isAnimating) {
                    setState(() {
                      _moveX = _tmpMoveX + (details.focalPoint.dx - _tmpFocal.dx) / _tmpScale;
                      _moveY = _tmpMoveY + (details.focalPoint.dy - _tmpFocal.dy) / _tmpScale;
                      _scale = _tmpScale * details.scale;
                      _rotation = _tmpRotation + details.rotation;
                      print(_rotation);
                    });
                  }
                }
            )
            ,
            Align(
              alignment: Alignment.bottomCenter,
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceAround,
                children: List.generate(
                  widget.picList.length,
                  (i) => GestureDetector(
                        child: CircleAvatar(
                          foregroundColor: Theme.of(context).primaryColor,
                          radius: 8.0,
                          backgroundColor: index == i
                              ? Theme.of(context).primaryColor
                              : Colors.white,
                        ),
                        onTap: () {
                          setState(() {
                            startX = endX = 0;
                            index = i;
                          });
                        },
                      ),
                ).toList(),
              ),
            )
          ],
        ),
        alignment: Alignment.center,
      ),
    );
  }

  void _getIndex(int delta) {
    if (delta > 50) {
      setState(() {
        index--;
        index = index.clamp(0, widget.picList.length - 1);
      });
    } else if (delta < 50) {
      setState(() {
        index++;
        index = index.clamp(0, widget.picList.length - 1);
      });
    }
  }
}