How to hide flutter webview in mobile app

1,442

I have found the solution to my own problem. I used webview_flutter_plus: ^0.1.1+9 instead and Visibility widget with the appropriate properties. It can be seen in the code snippet below.

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Webview counter: ' + scounter),
      ),
      body: Column(
        children: <Widget>[
          Visibility(
            visible: false,
            maintainState: true,
            child: SizedBox(
              height: 1,
              child: WebViewPlus(
                onWebViewCreated: (controller) {
                  this._webViewController = controller;
                  controller.loadUrl("files/test.html");
                },
                onPageFinished: (url) {
                  _webViewController.getHeight().then((double height) {
                    print("height: " + height.toString());
                    setState(() {
                      _height = height;
                    });
                  });
                },
                javascriptMode: JavascriptMode.unrestricted,
                javascriptChannels: <JavascriptChannel>[_counterx()].toSet(),
              ),
            ),
          ),
          Text("Webview above"),
        ],
      ),
      floatingActionButton: FloatingActionButton(
        child: const Icon(Icons.add),
        onPressed: () {
          _webViewController.evaluateJavascript('reset()');
        },
      ),
    );
  }
Share:
1,442
us2018
Author by

us2018

Like to learn and code either for a living or simply for fun.

Updated on December 22, 2022

Comments

  • us2018
    us2018 11 months

    I can execute code and library using javascript in my flutter on mobile app. I used webview_flutter to do that. But I do not want to display the webview in my UI. I just want to execute the library with the webview hidden. How can I do that in flutter?