This article explains you how you can integrate webview in your flutter applications to display existing web content with the help of example.
WebView is used when we want to display website content in our mobile applications without using external browser application. So we do not need to write code for website page if we use webview in our application. WebView is better solution for creating mobile application for an existing web application.
WebView is mobile component in which HTML content is rendered over a browser embedded. It allows us to display web content as part of our mobile application UI. WebView also provides control over web page lifecycle with the help of event listeners. We can provide same content to both web and mobile platforms using WebView.
We are using package called webview_flutter to integrate webview in our flutter application. This package is developed by core flutter team. This package provides WebView widget which we can add under any widget in widget tree. So first we need to add this package in our application.
Add required dependency for flutter webview in pubspec.yaml file
After adding below line in your pubspec.yaml file, press pub get option to install dependency if you are using android studio. For Visual Studio Code you need to save file for dependency.
Changes for iOS
We need to add following key in Info.plist file to use webview in iOS platform.
Changes for Android
We need to add following attribute in our android manifest file called AndroidManifest.xml to use webview in android platform. Otherwise you will get “net::err_cleartext_not_permitted” error when displaying content in WebView.
Integrate Flutter WebView Widget
WebViewController is used to perform other tasks after website page is fully loaded in webview. We can also open another url after initial url with the help of WebViewController.