Check Mobile App
Read now
Start a Project

WebView In Flutter

Save

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.

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.


debuggingEnabled
: 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.

main.dart

common_webview.dart

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 –

Conclusion

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.

Thank you for reading!!

. . .

Leave a Comment

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


Be the first to comment.

css.php

The support is fast and do everything in their power to make it perfect. If you need customization it's also done right away. I had massive research to select Mobikul and now I'm sure it was the right one.

Igor Souza

Igor Souza

Talk to Sales

Global

Live Chat
Start a Project

    Message Sent!

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

    Back to Home