flutter解决加载webview黑屏的问题

• 简单的说就是在webview上面先覆盖个空色的组件,等webview渲染完成,把上面的组件隐藏,从而达到用户看不出会有瞬间黑屏的问题

class _HomeDetailPageState extends State {
  WebViewController _controller;
  bool _isLoading = false;
  WebController webC = Get.put(WebController());
  @override
  Widget build(BuildContext context) {
    return Scaffold(
    appBar:createZK_navgationBar(),
    backgroundColor: Colors.white,
    body: SafeArea(
        child: Container(
          width: kWith,
          height: kHeight,
          child: Stack(
            children: [WebView(
              initialUrl: widget.urlStr,
              //JS执行模式 是否允许JS执行
              javascriptMode: JavascriptMode.unrestricted,
              onWebViewCreated: (controller) {
                _isLoading = true;
                _controller = controller;
              },
              onPageFinished: (url) {
                //已经加载完成
                webC.changeDetailWebStatus(true);
                _controller.evaluateJavascript("document.title").then((result){
                  //print("导航标题$result");
                }
                );
              },
              javascriptChannels: [
                JavascriptChannel(
                    name: "askImagePreviewer",
                    onMessageReceived: (JavascriptMessage message) {
                      print("参数： ${message.message}");
                    }
                ),
              ].toSet(),
            ),
              GetBuilder(
                init: WebController(),
                builder: (controller) => Offstage(
                  offstage: _isLoading,
                  child: Container(
                    width: kWith,
                    height: kHeight,
                    color: Colors.white,
                    child: Center(child: Text("加载中...")),
                  ),
                ),
              )
            ],
          ),
        ),
      ),
    );

  }
}