Flutter InAppWebView.

Finally, after a lot of work, the new version 5 of the flutter_inappwebview plugin is out (at the time of this writing, the latest release is 5.2.0)!

So, what’s new? What changed?

Well.. a lot!

Null-safety support

InAppWebView 5 comes with Dart null-safety support! What does this mean? We know that the null-safety feature has been released recently in the stable version of Dart (it requires Dart SDK >=2.12.0-0 <3.0.0), …

Flutter InAppWebView JavaScript 2-way Communication.

In this in-depth tutorial, I’m going to explain how you can communicate from Dart (Flutter WebView) to JavaScript and vice-versa using my flutter_inappwebview plugin (at the time of this writing, the latest release is 5.3.2).

There are 3 main ways to enable this 2-way communication:

  • JavaScript Handlers;
  • Web Message Channels;
  • Web Message Listeners.

JavaScript Handlers

The JavaScript Handler concept is similar to the native Android WebView JavaScript Interface and the iOS WKWebView JavaScript Message Handler ones, but it offers a cross-platform way of it.

In this article, I’m going to show how to create a full-featured mobile Browser App such as the Google Chrome mobile browser using the features offered by the flutter_inappwebview plugin.

Check out the previous article that introduces the flutter_inappwebview plugin here: InAppWebView: The Real Power of WebViews in Flutter.

This is what we are going to implement:

  • WebView Tab, with custom on long-press link/image preview, and how to move from one tab to another without losing the WebView state;
  • Browser App Bar with the current URL and all popup menu actions such as opening a new tab, a new incognito…

Flutter InAppWebView.

What is flutter_inappwebview ? It’s a Flutter plugin that allows you to incorporate WebView widgets into your Flutter app, to use headless WebViews, or to use In-App browsers.

So, what’s the difference between webview_flutter (Official flutter plugin) and flutter_webview_plugin ?
Compared to all other WebView plugins, it is feature-rich: a lot of events, methods, and options to control WebViews. Furthermore, they do not have good documentation about their API or, at least, it is not complete. Instead, every feature of flutter_inappwebview is almost all documented (just check the API Reference on pub.dev).

In this article, I’m going to present the…

This is the second part of a two-part series. You should read the first part “Jackson-js: Powerful JavaScript decorators to serialize/deserialize objects into JSON and vice versa (Part 1)”.

In this article, I will give a simple example using the jackson-js library with Angular 9 for the client side and two examples for the server side: one using Node.js + Express + SQLite3 (with Sequelize 5) and another one using Node.js + LoopBack 4.

Full code examples can be found in this repository.

Client side: Angular 9

For the client side, we will create a very basic Angular 9 application consisting of 2 models…

JSON logo

After many hours of development, I finally released the first version of the jackson-js library. As the name implies, jackson-js decorators are heavily inspired by the Java annotations of the famous Java FasterXML/jackson library.

You can install it using npm install —-save jackson-js and it can be used on both client (browser) and server (Node.js) side.

Why this library? What’s the difference between using this library instead of JSON.parse and JSON.stringify ?

For simple cases, you don’t need this library, of course, you can just use JSON.parse and JSON.stringify to serialize/deserialize JSON.

With jackson-js , you can easily manipulate your JavaScript objects/values serialization/deserialization using decorators such as @JsonProperty() , @JsonFormat() , @JsonIgnore() , etc. However, this…

Lorenzo Pichilli

I’m a Software Engineer mostly focused on Web (FullStack) and Mobile Development. JavaScript, TypeScript & Flutter enthusiast 💙.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store