How to hide header and footer in webview in Flutter.?

Question

I'm beginner to flutter , I want to hide section of website in my flutter application . I added flutter flutter_webview_plugin in pubspec.yaml file and imported package to my feed.dart page. the flutterWebviewPlugin.evalJavascript("alert('Hi, I just executed')"); is executed when i run the application. But flutterWebviewPlugin.evalJavascript("document.getElementById('header04-2j').style.display = 'none';"); i tried to hide header but its not working. Bellow is the source code .. Please help .

enter code here
    import 'package:flutter/material.dart';
import 'package:flutter_webview_plugin/flutter_webview_plugin.dart';

class FeedPage extends StatefulWidget {
  @override
  FeedPageState createState() {
    return new FeedPageState();
  }
}

class FeedPageState extends State<FeedPage> {
  final flutterWebviewPlugin = new FlutterWebviewPlugin();
  // alternatively you can define variable as var js = "YOUR_SCRIPT"; and use it inside evalJavascript

  @override
  void initState(){
    super.initState();
    flutterWebviewPlugin.evalJavascript("alert('Hi, I just executed')"); // executed
    flutterWebviewPlugin.evalJavascript("document.getElementById('header04-2j').style.display = 'none';"); // not executed
  }

  @override
  void dispose() {
    flutterWebviewPlugin.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return WebviewScaffold(
      url: 'https://www.esdatech.com/',
      hidden: true,
      appBar: AppBar(title: Text("ESDA")),
    );
  }
}

    

enter image description here

Solution

This is likely due to your webpage not being loaded, and therefore the element not existing, at the point you call that method in your code.

A solution would be to wait until the page is loaded before attempting to remove the element using the onStateChanged stream.

StreamSubscription<WebViewStateChanged> _onStateChanged;

@override
void initState(){
  super.initState();
  flutterWebviewPlugin.evalJavascript("alert('Hi, I just executed')");

  _onStateChanged =
    flutterWebViewPlugin.onStateChanged.listen((WebViewStateChanged state) {
      if(state.type == WebViewState.finishLoad) {
        flutterWebviewPlugin.evalJavascript("document.getElementById('header04-2j').style.display = 'none';");
      }
    }
  );
}

@override
void dispose() {
  _onStateChanged.cancel();
  flutterWebviewPlugin.dispose();
  super.dispose();
}

Comments

[Christopher Moore]

If my answer helped you please accept it.