Embedded Youtube video widget disappears while the web page (created by Flutter for Web) is scrolled up or down

问题

I managed to put an embedded Youtube video on a web page created using Flutter for Web. The problem is that this video widget disappears while the page is scrolled up or down, and reappears when the scrolling stops. The Chrome developer console shows this error remote.js:34 GET chrome-extension://invalid/ net::ERR_FAILED Firefox doesn't issue any error message but the flickering of the Youtube video happens there as well. It appears that the webpage continually fetches the Youtube video info again and again during the scroll. How do I fix this?

import 'package:flutter/material.dart';
import 'dart:html' as html;
import 'dart:ui' as ui;

void main() {
// ignore: undefined_prefixed_name
  ui.platformViewRegistry.registerViewFactory(
      'video',
      (int viewId) => html.IFrameElement()
        ..width = '640'
        ..height = '360'
        ..src = 'https://www.youtube-nocookie.com/embed/IyFZznAk69U'
        ..style.border = 'none');

  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
        builder: (BuildContext context, BoxConstraints viewportConstraints) {
      return SingleChildScrollView(
        child: ConstrainedBox(
          constraints: BoxConstraints(
            minHeight: viewportConstraints.maxHeight,
          ),
          child: Column(
            mainAxisSize: MainAxisSize.min,
            mainAxisAlignment: MainAxisAlignment.start,
            children: <Widget>[
              Container(
                color: Colors.purple,
                child: Center(
                  child: Container(
                    height: 360,
                    width: 640,
                    color: Colors.green,
                    child: HtmlElementView(viewType: "video"),
                  ),
                ),
              ),
              Text("test", textDirection: TextDirection.ltr),
              Text("test", textDirection: TextDirection.ltr),
              Text("test", textDirection: TextDirection.ltr),
              Text("test", textDirection: TextDirection.ltr),
              Text("test", textDirection: TextDirection.ltr),
              Text("test", textDirection: TextDirection.ltr),
              Text("test", textDirection: TextDirection.ltr),
              Text("test", textDirection: TextDirection.ltr),
              Text("test", textDirection: TextDirection.ltr),
              Text("test", textDirection: TextDirection.ltr),
              Text("test", textDirection: TextDirection.ltr),
              Text("test", textDirection: TextDirection.ltr),
              Text("test", textDirection: TextDirection.ltr),
              Text("test", textDirection: TextDirection.ltr),
              Text("test", textDirection: TextDirection.ltr),
              Text("test", textDirection: TextDirection.ltr),
              Text("test", textDirection: TextDirection.ltr),
              Text("test", textDirection: TextDirection.ltr),
              Text("test", textDirection: TextDirection.ltr),
              Text("test", textDirection: TextDirection.ltr),
              Text("test", textDirection: TextDirection.ltr),
              Text("test", textDirection: TextDirection.ltr),
              Text("test", textDirection: TextDirection.ltr),
              Text("test", textDirection: TextDirection.ltr),
              Text("test", textDirection: TextDirection.ltr),
            ],
          ),
        ),
      );
    });
}
}

回答1:

I believe this is a known issue for Flutter, since the view is being rebuilt it rebuilds the webpage as well. Odd.

If you look at flutter_webview_plugin the author writes:

Warning: The webview is not integrated in the widget tree, it is a native view on top of the flutter view. You won't be able see snackbars, dialogs, or other flutter widgets that would overlap with the region of the screen taken up by the webview.

If you can find a way to get the webview OUT of the widget tree, I bet it works without refreshing, it would of course render over everything else though.

Let me know if you figure out a work around because I'm in the same boat.

来源：https://stackoverflow.com/questions/59890992/embedded-youtube-video-widget-disappears-while-the-web-page-created-by-flutter