Flutter – WebView and Sharing Apps

Because, sharing is caring….

This post is an extension to my previous post on WebViews. Second part, shows how to share apps in Flutter.

Flutter team @google, recently announced a plugin for displaying webview in the Flutter apps.

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

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.

In the video above, I have programmed a Web-Browser in Flutter using the WebView widget..and finally sharing the app. Let’s see how to do it…

Begin…

import webview_flutter into the pubspec.yaml of your project as

dependencies:  webview_flutter: ^0.3.0

and then include,

import 'package:webview_flutter/webview_flutter.dart';

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

NOTE : If you are programming on iOS, one small extra step :

Go to your project structure and look for the ios folder.

In the info.plist, you need to add the following : 

<key>io.flutter.embedded_views_preview</key>
<string>YES</string>

How to use…

WebView(
    key: UniqueKey(),
    javascriptMode: JavascriptMode.unrestricted,
    initialUrl: 'YOUR URL',
),

This is the basic structure of the WebView widget :

Parameters :

1. key : Keys, from the flutter framework.
2. javascriptMode : Whether Javascript execution is enabled.
3. initialUrl : URL which you want to load.

This basic structure is enough to get you started with the WebView widget.

Additional features..

You can also detect gesture recognizers on this webview by using the parameter : gestureRecognizers

This method takes the parameter of type : 

{Set<Factory<OneSequenceGestureRecognizer>> gestureRecognizers}

Confused ??? No worries, keep scrolling…

Add the gestureRecognizers using this sample :

gestureRecognizers: Set()
     ..add(
     Factory<VerticalDragGestureRecognizer>(
     () => VerticalDragGestureRecognizer(),
     ),
),

It would give you error, because it needs two imports :

import 'package:flutter/foundation.dart';
import 'package:flutter/gestures.dart';

Similarly, you can add different gesture recognizers such as :

1. HorizontalDragGestureRecognizer
2. TapGestureRecognizer
3. MultiDragGestureRecognizer

Keys : 

Below is a pic representing all types of keys in flutter :

When to use keys:

Most of the time you don’t………….but

1. If you are adding/removing collection of stateful widgets of the same type. e.g Favorites app.
2. If you are reordering collection of stateful widgets of the same type. e.g TO-DO list app

An unexplored topic in flutter which recently was demystified by Emily Fortuna in the video :

---

Sharing Apps in Flutter…

We need to install the share package from Flutter,

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

Import the library:

import 'package:share/share.dart';

Invoke the static share method, wherever you want, for instance :

Share.share('Visit my website https://flatteredwithflutter.com');

---

Phew…..