Flutter’s official WebView plugin comes with an amazing feature which is called enabling and disabling JavaScript in WebView. WebView plugin has a property named as javascriptMode which has 2 parameters JavascriptMode.disabled and JavascriptMode.unrestricted. Using these parameters we can Flutter Enable Disable JavaScript in WebView Android iOS Example Tutorial.
Contents in this project Flutter Enable Disable JavaScript in WebView Example Tutorial:
1. Before getting started using WebView widget we have to download and install the plugin in our current flutter project. So open your project’s root folder and open pubspec.yaml file in code editor.
|
1 2 3 4 |
dependencies: webview_flutter: ^0.3.19+6 flutter: sdk: flutter |
Complete source code for my pubspec.yaml file after adding WebView:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
name: myapp description: A new Flutter project. version: 1.0.0+1 environment: sdk: ">=2.1.0 <3.0.0" dependencies: webview_flutter: ^0.3.19+6 flutter: sdk: flutter # The following adds the Cupertino Icons font to your application. # Use with the CupertinoIcons class for iOS style icons. cupertino_icons: ^0.1.2 dev_dependencies: flutter_test: sdk: flutter # For information on the generic Dart part of this file, see the # following page: https://dart.dev/tools/pub/pubspec # The following section is specific to Flutter. flutter: # The following line ensures that the Material Icons font is # included with your application, so that you can use the icons in # the material Icons class. uses-material-design: true |
3. Now we have to download and install newly added plugin. So open your flutter project root folder in Command Prompt in windows and Terminal in MAC and execute flutter pub get command like i did in below screenshot.
4. Open your project’s main.dart file and import material.dart and webview_flutter.dart package.
|
1 2 |
import 'package:flutter/material.dart'; import 'package:webview_flutter/webview_flutter.dart'; |
5. Creating void main runApp() method and now we would call our main MyApp class.
|
1 |
void main() => runApp(MyApp()); |
6. Creating our main Root class MyApp extends with StatelessWidget. In this class we would call WebViewLoad() class.
|
1 2 3 4 5 6 7 8 9 10 11 |
class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: WebViewLoad() ) ); } } |
7. Create a class named as WebViewLoad extends StatefulWidget. In this class we would make createState() method of State and pass WebViewLoadUI class name along with it.
|
1 2 3 4 5 |
class WebViewLoad extends StatefulWidget { WebViewLoadUI createState() => WebViewLoadUI(); } |
8. Creating our main child class named as WebViewLoadUI extends State. In this class we would make the WebView widget.
- initialUrl : Pass the Web Page URL here.
- javascriptMode : Supports 2 parameters JavascriptMode.disabled to disable JavaScript and JavascriptMode.unrestricted to enable JavaScript in WebView.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
class WebViewLoadUI extends State<WebViewLoad>{ @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text(' Disable JavaScript in WebView ')), body: WebView( initialUrl: 'https://google.com', javascriptMode: JavascriptMode.disabled, ) ); } } |
9. Complete source code for main.dart file:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
import 'package:flutter/material.dart'; import 'package:webview_flutter/webview_flutter.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: WebViewLoad() ) ); } } class WebViewLoad extends StatefulWidget { WebViewLoadUI createState() => WebViewLoadUI(); } class WebViewLoadUI extends State<WebViewLoad>{ @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text(' Disable JavaScript in WebView ')), body: WebView( initialUrl: 'https://google.com', javascriptMode: JavascriptMode.disabled, ) ); } } |
Screenshot:
