Flutter 仿掘金微信图片滑动退出页面效果，写给程序员的 Flutter 详细教程

return ExtendedImageSlidePage(child: result,slideAxis: SlideAxis.both,slideType: SlideType.onlyImage,onSlidingPage: (state) {///you can

《Android学习笔记总结+最新移动架构视频+大厂安卓面试真题+项目实战源码讲义》
浏览器打开：qq.cn.hn/FTe 免费领取

change other widgets' state on page as you want///base on offset/isSliding etc//var offset= state.offset;var showSwiper = !state.isSliding;if (showSwiper != _showSwiper) {// do not setState directly here, the image state will change,// you should only notify the widgets which are needed to change// setState(() {// _showSwiper = showSwiper;// });

_showSwiper = showSwiper;rebuildSwiper.add(_showSwiper);}},);

ExtendedImageGesturePage 的参数

下面是默认实现，你也可以根据你的喜好，来定义属于自己方式

Color defaultSlidePageBackgroundHandler({Offset offset, Size pageSize, Color color, SlideAxis pageGestureAxis}) {double opacity = 0.0;if (pageGestureAxis == SlideAxis.both) {opacity = offset.distance /(Offset(pageSize.width, pageSize.height).distance / 2.0);} else if (pageGestureAxis == SlideAxis.horizontal) {opacity = offset.dx.abs() / (pageSize.width / 2.0);} else if (pageGestureAxis == SlideAxis.vertical) {opacity = offset.dy.abs() / (pageSize.height / 2.0);}return color.withOpacity(min(1.0, max(1.0 - opacity, 0.0)));}

bool defaultSlideEndHandler({Offset offset, Size pageSize, SlideAxis pageGestureAxis}) {if (pageGestureAxis == SlideAxis.both) {return offset.distance >Offset(pageSize.width, pageSize.height).distance / 3.5;} else if (pageGestureAxis == SlideAxis.horizontal) {return offset.dx.abs() > pageSize.width / 3.5;} else if (pageGestureAxis == SlideAxis.vertical) {return offset.dy.abs() > pageSize.height / 3.5;}return true;}

double defaultSlideScaleHandler({Offset offset, Size pageSize, SlideAxis pageGestureAxis}) {double scale = 0.0;if (pageGestureAxis == SlideAxis.both) {scale = offset.distance / Offset(pageSize.width, pageSize.height).distance;} else if (pageGestureAxis == SlideAxis.horizontal) {scale = offset.dx.abs() / (pageSize.width / 2.0);} else if (pageGestureAxis == SlideAxis.vertical) {scale = offset.dy.abs() / (pageSize.height / 2.0);}return max(1.0 - scale, 0.8);}

确保你的页面是透明背景的

如果你设置 slideType =SlideType.onlyImage, 请确保的你页面是透明的，毕竟没法操控你页面上的颜色

Push 一个透明的页面

这里我把官方的 MaterialPageRoute 和 CupertinoPageRoute 拷贝出来了， 改为 TransparentMaterialPageRoute/TransparentCupertinoPageRoute，因为它们的 opaque 不能设置为 false