flutter 卡顿_Flutter WebView 卡顿问题

使用的是官方 webview_flutter 库，感觉 flutter 的 webview 挺多坑的，所以记录一下。

路由切换卡顿

问题：使用 Navigator.of(context).push(...) 路由切换到一个含有 webview 的 page 时，首次渲染会卡顿，这是因为 WebView 第一次构造的时候很慢导致的(也就是看不到了路由切换动画)

一种临时解决方案，在切换动画加载完毕后，再去构造 WebView，这样从用户角度上看，就不会有路由切换动画的卡顿了。class WebViewPage extends StatefulWidget {

final String uri;

WebViewPage({

@required this.uri,

}) : assert(uri != null);

@override

_WebViewPageState createState() => _WebViewPageState();

}

class _WebViewPageState extends State {

WebViewController _controller;

bool _animationCompleted = false;

@override

Widget build(BuildContext context) {

// 主要是下面的代码

var route = ModalRoute.of(context);

if (route != null && !_animationCompleted) {

void handler(status) {

if (status == AnimationStatus.completed) {

route.animation.removeStatusListener(handler);

setState(() {

_animationCompleted = true;

});

}

}

route.animation.addStatusListener(handler);

}

return Scaffold(

title: widget.title,

backgroundColor: Colors.white,

body: _animationCompleted

? WebView(

initialUrl: 'about:blank',

onWebViewCreated: (WebViewController webViewController) {

_controller = webViewController;

_loadHtmlFromAssets();

},

)

: Container(),

);

}

_loadHtmlFromAssets() async {

var uri = Uri.dataFromString(

await rootBundle.loadString(widget.uri),

mimeType: 'text/html',

encoding: Encoding.getByName('utf-8'),

).toString();

_controller.loadUrl(uri);

}

}