Early Adaption for Flutter Web: Dart’s HTML & JavaScript Proxying

https://flutter.dev/images/Dart-framework-v-browser-framework.png

This is part of a series aimed to demonstrate of using Flutter framework as web app covering different use-cases.

About the article

This article will cover the ability of Flutter & Dart to access more features than the Flutter SDK offers of using the Widget systems that is being used to develop mobile apps for iOS & Android platforms, like the browser’s DOM features using Dart’s HTML & JavaScript proxying (interlope).

Requirements

• Assumes you are already setup Flutter SDK and Flutter CLI
• Assumes you already have some experience with some programming languages and Flutter framework.
• Installed Google Chrome Browser
• Your Flutter’s SDK is set to read from the master branch (where Flutter libraries resides), you can set it up by running the following commands:

Point Flutter SDK to Master Branch
flutter channel master
Updates Flutter SDK
flutter upgrade
Enable Flutter for Web Builds
flutter config --enable-web
flutter create flutter_for_web_part1
cd flutter_for_web_part1
Runs the app on chrome
flutter run -d chrome

The Demo App

The application

The app is very simple, it will contain 2 Images & floating action button that if clicked it will execute certain HTML & JavaScripts interlopes functionalities:

Flutter Project

Only main.dart

The projects only consists of single dart file main.dart. For simplicity main.dart will contain the whole app.

main.dart

https://gist.github.com/vaygeth89/80792c70db9984fe65cd04b32de161a7

The important snippets in the main.dart file is the following:

The library imports

Here we are importing Dart’s proxying libraries for both HTML & JavaScript and giving an alias using as keyword to them in order to make our code more readable.

import 'dart:html' as html;
import 'dart:js' as js;

The Buttons

// InkWell is widget used to add taps & gestures events to child
InkWell(
onTap: () {
html.window.localStorage.addEntries([
MapEntry(
"data", "this data is stored on browser local storage")
]);
js.JsObject jsonObject = js.JsObject(js.context['Object']);
jsonObject["message"] = 'Flutter Web';
js.context["console"].callMethod(
"log", ['internalRoute', '\n', jsonObject["message"]]);
},
 child: Image.network("https://flutter.dev/assets/flutter-lockup-4cb0ee072ab312e59784d9fbf4fb7ad42688a7fdaea1270ccf6bbf4f34b7e03f.svg",
width: 200,
height: 200,),
),
InkWell(onTap: () {
String externalUrl =
'https://github.com/vaygeth89/flutter_for_web_part1';
html.window.alert("You're being redirected to \n $externalUrl");
js.context.callMethod("open", [externalUrl]);
},
child: Image.network(
"https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png",
width: 100,
height: 100,
),
)
//Rest of the code
//...
//...
//...

Tapping Flutter Logo

When you tap Flutter’s logo the app will execute

1- Save some data to local storage

html.window.localStorage.addEntries([
MapEntry("data", "this data is stored on browser local storage")
]);

2- Create an Object and assign data for it using JavaScript DOM objects

//Creates json object from javascript library
js.JsObject jsonObject = js.JsObject(js.context['Object']);
//Create object {"message":"Flutter Web"}
jsonObject["message"] = 'Flutter Web';

3- Print Data to Browser Console using console.log()

//Executes javascripts console.log();
js.context["console"].callMethod("log", 
['still in the same page', '\n', jsonObject["message"]]);

The js.context[“object”].callMethod(“method name”, options) grants you access to javascripts DOM methods like console logs, open url, prompts…etc, refer to https://api.dartlang.org/stable/2.5.2/dart-js/dart-js-library.html

Tapping Github Logo

When you tap on Github’s Logo the app will show Alert popup message and redirect you to this tutorial Github repository using

String externalUrl ='https://github.com/vaygeth89/flutter_for_web_part1';
html.window.alert("You're being redirected to \n $externalUrl");
js.context.callMethod("open", [externalUrl])

Tapping Floating Action Button

When you tap the floating action button the app will reload the current page

floatingActionButton: FloatingActionButton(
child: Icon(Icons.refresh),
onPressed: (){
html.window.location.reload();
 },
),

Summary

The takes is not limited to these features, you can do more to access the DOM as if you can writing vanilla HTML & JavaScript to manipulate the DOM like accessing getDocumentById & getDocumentByElement, StyleSheets …etc, refer to for more examples https://dart.dev/tutorials/web/low-level-html/add-elements

References

Flutter for web: https://flutter.dev/web

Tutorial Github repository: https://github.com/vaygeth89/flutter_for_web_part1

Dart’s HTML Low Level examples: https://dart.dev/tutorials/web/low-level-html/add-elements