I cant use java script on flutter

Question

My JavaScript code is not working. I want to make a WebView application via flutter. but I want to remove some sections or customize some properties using JavaScript on flutter. I also removed header and footer but I cant customize container padding of the website using JavaScript. Its not working.

Here is the code:

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

void main() {
  runApp(MaterialApp(
    title: "Webview App",
    home: Scaffold(
      appBar: AppBar(
        title: Text("University Of Global Village"),
        centerTitle: true,
      ),
      body: MyApp(),
    ),
  ));
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      child: WebViewState(),
    );
  }
}

class WebViewState extends StatefulWidget {
  const WebViewState({Key? key}) : super(key: key);

  @override
  State<WebViewState> createState() => _WebViewStateState();
}

class _WebViewStateState extends State<WebViewState> {
  int position = 1;
  @override
  WebViewController? controller;

  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        child: IndexedStack(
          index: position,
          children: [
            WebView(
              initialUrl: "https://ugv.edu.bd/notice",
              javascriptMode: JavascriptMode.unrestricted,
              onPageStarted: (Value) {
                setState(() {
                  position = 1;
                });
              },
              onPageFinished: (value) {
                setState(() {
                  position = 0;

                  controller?.evaluateJavascript(
                      "document.getElementsByClassName('header')[0].style.display ='none'");

                  controller?.evaluateJavascript(
                      "document.getElementsByClassName('inner-header')[0].style.display ='none'");

                  controller?.evaluateJavascript(
                      "document.getElementsByClassName('footer')[0].style.display ='none'");

                  controller?.evaluateJavascript(
                      "document.getElementsByClassName('container')[0].style.padding-top ='20px !important'");

                  
                });
              },
              onWebViewCreated: (controller) {
                this.controller = controller;
              },
            ),
            Container(
              child: Center(
                child: CircularProgressIndicator(),
              ),
            )
          ],
        ),
      ),
    );
  }
}

Website: https://ugv.edu.bd/notice

score 0 · Answer 1 · answered May 26 '22 at 08:28

"padding-top" is not correct.

Your code;

"document.getElementsByClassName('container')[0].style.padding-top ='20px !important'");

You must change like this;

"document.getElementsByClassName('container')[0].style.paddingTop ='20px !important'");

You can more information about padding-top on w3

I cant use java script on flutter

1 Answers1