Flutter - WebView and Sharing Apps

Flutter — WebView and Sharing Apps

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

All in one Flutter Resource: https://flatteredwithflutter.com/webview-and-sharing-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> 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 http://flatteredwithflutter.com');

Articles related to Flutter:

Phew…..

The Flutter Pub is a medium publication to bring you the latest and amazing resources such as articles, videos, codes, podcasts etc. about this great technology to teach you how to build beautiful apps with it. You can find us on Facebook, Twitter, and Medium or learn more about us here. We’d love to connect! And if you are a writer interested in writing for us, then you can do so through these guidelines.