Webview is a web browser UI component that can be integrated in an application to display web pages. If you want to add a web app or a web page in your app you can use webview. All that webview does by default is to render your webpage, allowing to some extent we can control the webview.

‍

Why do we use webview?

To display a webpage in your application without opening your device’s browser. If you want to provide data to your application that you might update such as — Terms and conditions, privacy policy, Faqs about the app, etc

In some scenarios you might find it easier to build a webview and display data in it rather than adding http/dio calls and performing request-response, creating models and displaying them in your application. For eg — Upon the completion of payment in many payment gateways, the resulting flow can be easily integrated into a webview for a synchronous flow.

‍

Pros and Cons of webView

Pros -

• Single page for native devices(iOs and android).
• As all the pages are on your server so any change done to the web page is easily accessible to the user.
• This helps in the reduction of time and not going back to the mobile development cycle.
• There is no need to implement the same functionality again in the native app eg — payment.

Cons -

• WebViews have a low potential to listen to all the inputs from users.
• Sharing and saving data from the web to the app is not fully compatible.
• Features for offline are not useful, as we have to be online to use a webView
• As webView forms and an extra layer, full performance of the device cant be used.

Prerequisites — basic knowledge of flutter. such as adding third-party packages into flutter and implementing them and understanding of controllers.

Let’s begin how to show websites in your flutter application

‍

Webview in Flutter

In this blog we will be using the webview_flutter plugin. For iOS webview is supported by WKWebView, on android webview is supported by WebView.

Integrate the webview plugin in your pubspec.yaml file by choosing the proper version according to your dart version.

webview_flutter <The compatible version>

In Pubsepc.yaml file -

dependencies: flutter: sdk: flutter webview_flutter:

After adding the plugin, do a pub get to install the package in your project. Or run the below cmd in your editor terminal to install the package — flutter pub get webview_flutter

For android the min sdk version should be 20 or above, got to android/app/build.gradle and change min sdk

android { defaultConfig { minSdkVersion 20 } }

it acts just like a widget, rather it is just like any other widget

First add the import webview to your class,

import ‘package:webview_flutter/webview_flutter.dart’;

Just add this starter code to get started

WebView (initialUrl : ‘https://www.quoality.com/’ )

This will load the web page quality.com and render it on the screen just like a browser.

Till here we are able to load a webpage in our app using webview. But here comes a question, how to control my webview?

The answer is using a webview controller, the webview is built fully, it returns this controller through a callback(Callback is a function or a method which we pass as an argument into another function or method and can perform an action when we require it.)

WebViewController _quoalityController; WebView( initialUrl: ‘‘https://www.quoality.com/', onWebViewCreated: (WebViewController webViewController) { _quoalityController = webViewController; }, );

Webview is a stateful widget, it keeps track of the current page and browsing history. If you have multiple webviews in your application you might need to use keys.

More actions which can be performed using webviews can be found in the documentation of Webview Class documentation Below I am listing few propertied from the Webview Class documentation

Initial Url — This holds the initial url which is rendered on the screen when we initialize webview.

JavascriptMode — This enables javascript, default it is disabled.

Key — Controls the replacement of widgets in the widget tree.

onPageStarted — Call for when a page starts loading.

onPageFinished — Call for when a page has finished loading. .

Just like how there are two sides to a coin, webView also has two sides. We can easily carry out changes in a webview while having no approval time from the stores as it is stored in the server. Also, in a webview, it’s not possible to use a device’s full potential.

Also, to know more about ancillary services, revenue acceleration, etc. book a demo with Quoality today or visit our site for more information.

‍