英文:
InAppWebView within LayoutBuilder fullscreen issue
问题
I'm trying to use InAppWebView (v6 latest beta because I'm trying to get this to work on the web platform) to display an embedded vimeo player. In a new flutter app, this works fine:
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
final GlobalKey webViewKey = GlobalKey();
InAppWebViewSettings settings = InAppWebViewSettings(
useShouldOverrideUrlLoading: true,
mediaPlaybackRequiresUserGesture: false,
allowsInlineMediaPlayback: true,
iframeAllowFullscreen: true);
return Scaffold(
body: InAppWebView(
key: webViewKey,
initialSettings: settings,
initialUrlRequest: URLRequest(
url: WebUri(Uri.dataFromString(
'<html><div style="position:relative;padding-top:56.25%;"><iframe src="https://player.vimeo.com/video/689902544?h=1c8590a277" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" style="position:absolute;top:0;left:0;width:100%;height:100%; allowfullscreen></iframe><p><a href="https://vimeo.com/689902544">Eternal Spring</a> from <a href="https://vimeo.com/christopherdormoy">Christopher Dormoy</a> on <a href="https://vimeo.com">Vimeo</a>.</p></div></html>',
mimeType: 'text/html')
.toString())
//url: WebUri("https://orf.at")
)),
);
}
}
When I click on the fullscreen icon in the Vimeo player, my browser correctly switches to fullscreen.
However, in my actual application, my widget is wrapped inside a LayoutBuilder and it seems, whenever the InAppWebView enters fullscreen, the LayoutBuilder triggers a rebuild of the child widget tree and thus immediately I'm thrown out of the fullscreen again.
What can I do to make fullscreen work also within a LayoutBuilder?
英文:
I'm trying to use InAppWebView (v6 latest beta because I'm trying to get this to work on the web platform) to display an embedded vimeo player. In a new flutter app, this works fine:
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
final GlobalKey webViewKey = GlobalKey();
InAppWebViewSettings settings = InAppWebViewSettings(
useShouldOverrideUrlLoading: true,
mediaPlaybackRequiresUserGesture: false,
allowsInlineMediaPlayback: true,
iframeAllowFullscreen: true);
return Scaffold(
body: InAppWebView(
key: webViewKey,
initialSettings: settings,
initialUrlRequest: URLRequest(
url: WebUri(Uri.dataFromString(
'<html><div style="position:relative;padding-top:56.25%;"><iframe src="https://player.vimeo.com/video/689902544?h=1c8590a277" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" style="position:absolute;top:0;left:0;width:100%;height:100%; allowfullscreen></iframe><p><a href="https://vimeo.com/689902544">Eternal Spring</a> from <a href="https://vimeo.com/christopherdormoy">Christopher Dormoy</a> on <a href="https://vimeo.com">Vimeo</a>.</p></div></html>',
mimeType: 'text/html')
.toString())
//url: WebUri("https://orf.at")
)),
);
}
}
When I click on the fullscreen icon in the Vimeo player, my browser correctly switches to fullscreen.
However, in my actual application, my widget is wrapped inside a LayoutBuilder and it seems, whenever the InAppWebView enters fullscreen, the LayoutBuilder triggers a rebuild of the child widget tree and thus immediately I'm thrown out of the fullscreen again.
What can I do to make fullscreen work also within a LayoutBuilder?
答案1
得分: 1
问题似乎出在你对GlobalKey的使用上 - 每次调用build函数时都会创建它，这反过来会导致InAppWebView的重新初始化，可能导致它退出全屏。
简单的解决方法是只创建一次GlobalKey（或者如果不需要它做其他用途，可以完全省略它）：
class _MyHomePageState extends State<MyHomePage> {
final webViewKey = GlobalKey();
@override
Widget build(BuildContext context) {
...
}
}
英文:
The problem seems to be in your usage of the GlobalKey - it's created every time build function is called
This, in turn causes re-initialization of the InAppWebView, which will probably cause it to exit full-screen.
Simple solution is to create the GlobalKey once (or just completely omit it if you don't need it for anything else):
class _MyHomePageState extends State<MyHomePage> {
final webViewKey = GlobalKey();
@override
Widget build(BuildContext context) {
...
}
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论