前言
目前pub上关于webview有两个点赞最多的插件，
webview_flutter 和 flutter_webview_plugin
经过一番比较选择了后者：flutter_webview_plugin，这里将记录写出来，希望对你有所帮助
两者区别
webview_flutter ：
flutter官方开发维护，采用的platformView显示。
受flutter端控制（在树内），对于页面过渡动画是可协调，受控制的。
flutter_webview_plugin ：
flutter 社区开发维护，采用的是原生端添加渲染的方式。
因为是原生端绘制，不在flutter 树内，不受其控制，显示和隐藏是需要methodChannel进行通知的。
看起来前者要比后者灵活方便，但是唯一也是最严重的扣分项就是性能问题 ：
webview_flutter 的性能要明显弱于 flutter_webview_plugin，其所造成的卡顿是肉眼可见，不需要看什么fps、dumpsy啥的...尤其是稍微复杂一些的页面。
基于此我选择了flutter_webview_plugin，当然它也有不足。
flutter_webview_plugin
遇到的问题
由于其本身是采用原生端渲染（以安卓为例，是通过addContentView(webview)）,因此其不在flutter 的widget树内，也就无从谈起flutter对其的控制了。
那么当我们的页面采用了过渡动画，如滑动进入/退出，由于flutter 页面在没有走完过渡动画时，是不会真正退出的（走dispose），而插件的显隐和释放是在页面的dispose中才进行的，这就导致了，背景虽然滑出去了（或者漏出了上层页面），但是webview的内容依然残留了一会才消失。
问题演示
问题分析
查看了flutter_webview_plugin的源码，它的ui结构和运行流程如下图
代码大致结构
class _WebviewScaffoldState extends state{
widget build(){
return Scaffold(
body:_WebviewPlaceholder(
onRectChanged:(Rect rect){
webviewReference.launch(
rect:rect
...
);
}
)
);
}
}
在创建的renderBox的paint方法调用后，就会回调onRectChanged 这个方法并携带显示区域rect，然后通过
webviewReference.launch 启动原生端的view添加绘制，绘制区域基于所传的rect。
webviewReference extends FlutterWebviewPlugin 这个类是一个通信类，
这个类还对外暴露了一个resize方法用于在rect改变时进行相应的调整
/// resize webview
Future resize(Rect rect) async {
final args = {};
args['rect'] = {
'left': rect.left,
'top': rect.top,
'width': rect.width,
'height': rect.height,
};
await _channel.invokeMethod('resize', args);
}
经过上面的分析，只要我们改动这个rect就可以改变webview的显示位置和大小。
首先我想到的是对页面做动画的PageRouteBuilder;
初版解决方案
经过对PageRouteBuilder这类的源码一层一层分析后
PageRouteBuilder 嵌套极多，同时我还捎带了看了一下push方法，所得的大致的流程图我放在文章结尾，有兴趣的可以看一下
发现通过builder.animation可以对过渡动画进行监听
SlideRightRouteBuilder builder = SlideRightRouteBuilder(ComplexPage());
Navigator.of(context).push(builder);
///要放在push后面，不然报错，原因见文章末尾的流程图
builder.animation.addListener(() {
});
那么我给ComplexPage传入一个 key，通过这个获取context，进而取到它的offset,然后在回调函数中执行以下操作
final RenderBox box = context.findRenderObject();
final Offset offset = box.localToGlobal(Offset.zero);
这个offset就是包裹webview的那个父widget，它是在widget树上，受动画控制的，换言之随着动画的进行，这个offset也会变化。
之后我们只需要调用
webviewReference.resize(_rect.shift(offset));
在这个过程中，因为builder和resize分别在不同的widget（页面），只能通过各种接口传输/调用，这样就发生了严重的耦合，在考虑需要兼容 滑动/缩放动画，并pr到插件仓库后，便直接放弃了这个方法。
终版解决方案-兼容滑动/缩放
重新思考，发现对于builder的依赖，只是对animation的监听，并触发重绘（resize），对于进度值，完全可以通过其他方法解决。所以便有了下面的方案。
首先我在插件的通信类FlutterWebviewPlugin,定义了支持的过渡到动画类型
/// the transition animation type of page on/off screen
enum TransitionType{
Non,
Slide,
Scale
}
之后在插件WebviewScaffold的构造函数中增加了对应的参数
final TransitionType transitionType;
在state的initState（）中调用我创建的方法：
perceptionPageTransition();
/// coordinate the webview rect whit page's transition
void perceptionPageTransition(){
if(widget.transitionType != TransitionType.Non){
WidgetsBinding.instance.addPostFrameCallback((timeStamp) {
//avoid to concurrent modification exception
WidgetsBinding.instance.addPersistentFrameCallback((timeStamp) {
if(context != null){
driveWebView();
}
});
});
}
}
通过上面这个方法，我就可以模拟出builder.animation的监听了。再看driveWebView()方法
void driveWebView(){
final RenderBox box = context.findRenderObject();
final Offset offset = box.localToGlobal(Offset.zero);
//获得可绘制的大小
final Size size = box.size;
//获得可绘制的区域
final Rect rect = box.paintBounds;
//当变动位置等于绘制区域的位置时，说明动画已经执行完毕，直接退出，避免过度绘制
if(offset.dx == rect.left)return;
//这个值用于缩放动画
//根据当前位置的dx值/除以size的宽度，就可以计算出动画进度value
final double value = offset.dx/size.width;
//根据传入的动画类型，对rect进行位移或者缩放
switch(widget.transitionType){
case TransitionType.Slide:
webviewReference.resize(_rect.shift(offset));
break;
case TransitionType.Scale:
final double www = box.size.width*(value*2);
final double hhh = box.size.height*(value*2);
webviewReference.resize(Rect.fromLTWH(offset.dx,offset.dy,size.width-www , size.height-hhh));
break;
case TransitionType.Non:
// TODO: Handle this case.
break;
}
}
这样我们就完成了初版的功能，同时使插件和项目进行了解耦。
效果图
debug模式下，第一次过度会有错位之后正常
性能模式和release 则完全正常
分析时记录的一些流程图
.push()
[图片上传失败...(image-8f4dbc-1598493593844)]
pageRouteBuilder
结语
希望以上对你有所帮助，如果不足之处欢迎指出，喜欢的点个赞撒 ;)
该项目已经PR，大佬正在帮忙审核，不知道什么时候合并。
Fork的仓库地址
我的其它文章
Bedrock——基于MVVM+Provider的Flutter快速开发框架
Flutter自定义View——仿高德三级联动Drawer
Flutter 自定义View——仿同花顺自选股列表