WebView in Flutter

WebView in Flutter

aseemwangoo No Comments
  Flutter

Spending useful time on Web….

Going through variety of articles / plugins related to Flutter, I came across this plugin, named WebView..

https://pub.dartlang.org/packages/flutter_webview_plugin

As a developer, we may face a situation where we would require to open a url in the application itself. Well, this plugin is an answer to all those questions.

Let’s Begin…

import flutter_webview_plugin into the pubspec.yaml of your project as

 

WebView Scaffold

WebView Scaffold

and then include,

import ‘package:flutter_webview_plugin/flutter_webview_plugin.dart’;

into your dart file. Now, you will be able to avail the features of this plugin…

Next…

You will need to use the WebViewScaffold widget as

WebView Scaffold

WebView Scaffold

 

Parameters :

  1. url : The url which you want to open.
  2. withZoom : Allow the users to zoom the webpage.
  3. withLocalStorage : Saving data in the device storage.

Now…

Suppose, you want to listen the url changes being done by the user.

For instance, if the user is navigating from one url to another, you want to record the latest urls, now that’s possible using this plugin….

First, you need an instance of FlutterWebViewPlugin as

final flutterWebviewPlugin = new FlutterWebviewPlugin();

Next, you need an instance of StreamSubscription as

StreamSubscription<WebViewStateChanged> _onStateChanged;

For listening to the url changes, simply do as below :

Url Listener…

Url Listener…

 

At the end, dispose off the streams as _onUrlChanged.cancel();

and flutterWebviewPlugin.dispose();

WebView App…

WebView App…

Finally,

For launching a url, we need to

flutterWebviewPlugin.launch(selectedUrl)

where selectedUrl = parameter name…..

In the app screenshot above,

  1. Open Webview (rect) : Launches the url (google.com) in the rectangle widget.
  2. Open hidden Webview : Launches the url in the background.
  3. Open Fullscreen Webview : Launches the url covering the entire screen
  4. Open Widget Webview : Lauches the url as an application screen i.e (you can navigate back and forth)

      5. Close : Closes the webview launched (either in background or foreground)

Video demonstration :

For complete source code, please visit

https://github.com/AseemWangoo/flutter_programs/blob/master/WebView.dart

P.S……………………