WebView添加简单进度条

推荐Flutter webview 使用和交互

我这边进度条使用的是一个动画库

# 加载Loading（指示器） https://github.com/jogboms/flutter_spinkit
flutter_spinkit: "^4.1.2"

直接上代码了，注释代码都有

class XWebView extends StatefulWidget {
  final String initialUrl;

  XWebView({Key key, this.initialUrl}) : super(key: key);

  @override
  _XWebViewState createState() => _XWebViewState();
}

class _XWebViewState extends State<XWebView> {
  final Completer<WebViewController> _controller =
      Completer<WebViewController>();

  ///是否显示加载 true是
  bool _isShowProgress = false;

  @override
  void initState() {
    super.initState();
    if (Platform.isAndroid) WebView.platform = SurfaceAndroidWebView();
  }

  @override
  Widget build(BuildContext context) {
    return Stack(
      alignment: Alignment.center,
      children: [
        WebView(
          javascriptMode: JavascriptMode.unrestricted,
          initialUrl: widget.initialUrl,
          onWebViewCreated: (WebViewController webViewController) {
            //WebView创建完成时调用
            LogUtil.v("XWebView onWebViewCreated");
            _controller.complete(webViewController);
            setState(() {
              _isShowProgress = true;
            });
          },
          onPageStarted: (url) {
            //页面开始加载时调用
            LogUtil.v("XWebView onPageStarted : $url");
          },
          onPageFinished: (url) {
            //页面加载完成时调用
            LogUtil.v("XWebView onPageFinished : $url");
            setState(() {
              _isShowProgress = false;
            });
          },
        ),
        _isShowProgress
            ? SpinKitThreeBounce(
                color: Theme.of(context).primaryColor,
        ) //动画控件根据自己需求改动
            : const SizedBox.shrink(),
      ],
    );
  }
}