Spending useful time on Web….
Going through variety of articles / plugins related to Flutter, I came across this plugin, named WebView..
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
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
Parameters :
- url : The url which you want to open.
- withZoom : Allow the users to zoom the webpage.
- 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 :
At the end, dispose off the streams as _onUrlChanged.cancel();
and flutterWebviewPlugin.dispose();
Finally,
For launching a url, we need to
flutterWebviewPlugin.launch(selectedUrl)
where selectedUrl = parameter name…..
In the app screenshot above,
- Open Webview (rect) : Launches the url (google.com) in the rectangle widget.
- Open hidden Webview : Launches the url in the background.
- Open Fullscreen Webview : Launches the url covering the entire screen
- 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……………………