Flutter web view provides an easy way to embed already existing web page inside a Flutter app with less no of code. This is just like the other Flutter widget and you can directly use that in your application
Adding a WebView to Flutter App
First, need to add a dependency to your pubspec.yaml
dependencies:
webview_flutter: ^1.0.7
Next, run the following command to install the package
flutter pub get
Next Import following code inside the dart file to use the widget
import 'package:webview_flutter/webview_flutter.dart';
You can Just use WebView widget with setting the initialUrl property to load your website inside the app.
WebView(
initialUrl: 'https://flutter.io',
)

Enable Javascript in Webview
Default Javascript is disabled in the Flutter webview. But you can enable Javascript with a single line of code. Just set the JavascriptMode.unrestricted to the javascriptMode property.
WebView(
initialUrl: 'https://flutter.io',
javascriptMode: JavascriptMode.unrestricted,
)
Load webpage when click a button
You can control the functionality of the webview using WebViewController. When the webview full loaded it return the webViewController and you set your controller to access those options.
WebViewController _webviewController;
WebView(
initialUrl: '',
onWebViewCreated: (WebViewController webViewController) {
_webviewController = webViewController;
},
)
You can keep the initialUrl as an empty and set that later on using the _webviewController.
RaisedButton(
child: Text("Load Flutter"),
onPressed: () {
_webviewController.loadUrl("https://flutter.io");
},
)
Adding Previous an Forward actions
If you move inside a page inside the website and if you want to go backward of history, you can use goBack method in WebViewController. Also if need to go forward of the history you can use goForward method.
RaisedButton(
child: Text("Forward"),
onPressed: () {
_webviewController.goForward();
},
)
RaisedButton(
child: Text("Back"),
onPressed: () {
_webviewController.goBack();
},
)
Get title of the webpage
you can use getTitle() method to access the website name which has specified under the HTML title tag.
RaisedButton(
child: Text("Title"),
onPressed: () {
_webviewController.getTitle().then((value) => {
print(value)
});
},
)
Access DOM inside the Application
You can access or manipulate DOM by setting JS code to evaluateJavascript in the WebViewController. In this example, I will share a code to access the Button name using the class name of the button. This is a very powerful method if you want to manipulate DOM inside your Flutter application.
RaisedButton(
child: Text("Button Text"),
onPressed: () {
_webviewController
.evaluateJavascript("document.getElementsByClassName('btn-cta')[0].text;")
.then((value) => {
print(value)
});
},
)
Clear WebView cache
By default, webview will cache the required data to improve the performance of the web application. But in case you want to manually clear the cache you can use clearCache method of the WebViewController.
RaisedButton(
child: Text("Clear cache"),
onPressed: () {
_webviewController.clearCache();
},
)
Reload current URL
You can use the reload method of the WebViewController to reload the current URL
RaisedButton(
child: Text("Reload"),
onPressed: () {
_webviewController.reload();
},
)
Scroll to a certain position
scrollTo will give feasibility to Scroll the webpage based on the x and y position.
RaisedButton(
child: Text("Scroll"),
onPressed: () {
_webviewController.scrollTo(0,400);
},
)

Conclusion
Hope you got a better idea about how to add webview in Flutter and control different functionalities like javascript, backward, foward, clear cache etc.