Flutter InAppWebView 仅在特定加载时间后显示进度指示器

Question

我用 Flutter InAppWebView 构建了一个混合应用程序，它只显示一个网站，没有提示用户基本上是在与浏览器交互。

有了快速的互联网连接，它就可以完美运行。但是当网站需要一些时间来加载时，在网站加载并呈现之前什么都不会发生。在此加载期间，应用程序似乎确实已挂起。

当我激活 LinearProgressIndicator 时，您会意识到应用程序正在加载。但是如果互联网连接良好，网站加载速度如此之快以至于 ProgressIndicator 是一个烦人且不必要的细节。

所以我只想在加载过程花费超过 800 毫秒的时间时显示 ProgressIndicator。 我试图用一个 Flutter 定时器来实现这个，它将一个变量设置为 true 来让 onProgressChanged 中的代码被执行。

// to indicatr in onProgressChanged that the specific time is over 
// and the progress bar should be displayed 
bool loadTimerover = false; 

// timer object that is created in onLoadStart and cleared in onLoadStop
late Timer loadbartimer;

.
.
.

InAppWebView(
    key: webViewKey,
    initialUrlRequest:
    URLRequest(url: Uri.parse("https://www.example.com/")),
    initialOptions: options,
    pullToRefreshController: pullToRefreshController,
    onWebViewCreated: (controller) {
    webViewController = controller;
    },

    onLoadStart: (controller, url) {
      setState(() {
        this.url = url.toString();
        urlController.text = this.url;
      });
      this.loadbartimer = Timer(
        Duration(milliseconds: 800), () {
        setState(() {
          this.loadTimerover = true;
        });
        }
      );  
    },

    onLoadStop: (controller, url) async {
      pullToRefreshController.endRefreshing();
      setState(() {
        this.url = url.toString();
        urlController.text = this.url;
      });
      // to reset the variable for the next siteload
      // if loadtimer finished this is necessary
      this.loadTimerover = false;

      // stop the loadtimer if he isnt done
      try {
        this.loadbartimer.cancel();
      }catch(e) {}
     },
                                
    onProgressChanged: (controller, progress) {
      // to show load progress only if it takes longer
      // than 800ms 
      if (this.loadTimerover == true) {
        if (progress == 100) {
          pullToRefreshController.endRefreshing();
        }

        setState(() {
          this.progress = progress / 100;
          urlController.text = this.url;
        });
        }
      },
    ),
    progress < 1.0
    ? LinearProgressIndicator(value: progress,
    valueColor: new AlwaysStoppedAnimation<Color>(Color(0xfffffffa)),
    backgroundColor: Color(0xfffb5148),
    )
    : Container(),

通过这种方式，当网站快速加载时，ProgressIndicator 会被隐藏。但是如果连接不好，加载网站需要几秒钟，ProgressIndicator 只会在网站呈现之前快速弹出。所以在加载期间，它看起来又像是应用程序挂起了。如果加载过程花费的时间超过 800 毫秒，则 ProgressIndicator 应该像正常情况一样顺利工作。

我希望我已经充分解释了这个问题。

提前致谢

Answer 1

经过三天的进一步尝试，我得出结论，这是目前唯一在 InAppWebView 上显示进度指示器的方法，仅适用于长时间加载。

我完成了混合应用程序并将其代码发布为模板Flutter 混合应用程序模板。在那里您还可以看到我当前的进度指示器解决方案。