Flutter:如何在WebView加载页面之前显示CircularProgressIndicator? [英] Flutter: How to show a CircularProgressIndicator before WebView loads the page?

问题描述

我正在使用webview_fluttter插件，但是我找不到在webview显示页面之前显示CircularProgressIndicator的方法...

I'm using the webview_fluttter plugin, but I can't find a way to show a CircularProgressIndicator before the webview shows the page...

Android的WebViewClient onPageStarted/onPageFinished相当于什么?

What's the equivalent of Androids WebViewClient onPageStarted/onPageFinished?

WebView(
  initialUrl: url,
  onWebViewCreated: (controller) {
  },
)

推荐答案

在0.3.5版中，存在"onPageFinished"回调.您可以使用IndexedStack创建WebView容器.

In version 0.3.5 there is 'onPageFinished' callback. You can create WebView container with IndexedStack.

import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';

class _WebViewContainerState extends State < WebViewContainer > {
  var _url;
  final _key = UniqueKey();
  _WebViewContainerState(this._url);
  num _stackToView = 1;

  void _handleLoad(String value) {
    setState(() {
      _stackToView = 0;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: IndexedStack(
        index: _stackToView,
        children: [
          Column(
            children: < Widget > [
              Expanded(
                child: WebView(
                  key: _key,
                  javascriptMode: JavascriptMode.unrestricted,
                  initialUrl: _url,
                  onPageFinished: _handleLoad,
                )
              ),
            ],
          ),
          Container(
            color: Colors.white,
            child: Center(
              child: CircularProgressIndicator(),
            ),
          ),
        ],
      )
    );
  }
}

class WebViewContainer extends StatefulWidget {
  final url;
  WebViewContainer(this.url);
  @override
  createState() => _WebViewContainerState(this.url);
}

这篇关于Flutter:如何在WebView加载页面之前显示CircularProgressIndicator?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！