WebView In Flutter


In this blog, we will discuss how we can achieve Webview in our flutter app. WebViews are mobile components where HTML content is rendered over a browser inside a mobile app. We will use the

webview_flutter plugin to show web pages in our app.

webview_flutter is a Flutter plugin. It provides a WebView widget on Android and iOS. WebView widget has the following properties.

You may also visit our Flutter app development company page for more information.

Properties of WebView

onWebViewCreated: This function is invoked once when the web view is created.

initialUrl: The initial URL of the web resource.

javascriptMode: It is used to enable JavaScript in the WebView.

javascriptChannels: The set of JavascriptChannels available to JavaScript code running in the WebView.

navigationDelegate: A delegate function that decides how to handle navigation actions.

onPageStarted: This function is invoked when a page starts loading.

onPageFinished: This function is invoked when a page has finished loading.

onProgress: This function invoked when a page loading started.

: It is use to Controls debugging in WebView by doing its value true but the default debuggingEnabled is false.

gestureNavigationEnabled: A Boolean value indicating whether horizontal swipe gestures will trigger back-forward list navigations. Its default value is false.

allowsInlineMediaPlayback: Inline playback of HTML5 videos controlled by this property on iOS. Android allows it by default. Its default value is false.

zoomEnabled: It indicates whether the WebView should support zooming using its on-screen zoom controls and gestures. Its default value is true.

backgroundColor: The background color of the WebView.

Step to integrate WebView in Flutter

Step-1 -> Firstly, add the webview_flutter dependency in the pubspec.yaml file.

Step– 2 -> Run ‘flutter pub get‘ command.

After this, we are ready to write our code.


Webview Back Navigation:


While running the app, you may face issue related to minSdkVersion. To solve this issue, you should correct the value of minSdkVersion in android/app/build.gradle.

The output of the code is –


In this blog, we have read about the WebView in Flutter.

I hope it will help you out in understanding and getting a brief idea about flutter Webview. You can also check our other blog here.

Thank you for reading!!!

. . .
Discuss on Helpdesk

Leave a Comment

Your email address will not be published. Required fields are marked*

Be the first to comment.

Start a Project

    Message Sent!

    If you have more details or questions, you can reply to the received confirmation email.

    Back to Home