Introduction

Flutter was first announced at Google I/O in May 2017 with an alpha toolkit and in 2018 at Google I/O, it finally hit version 1.0 with a future new product, called HummingBird. We were all excited and could not wait for its release date and on May 7th 2019 at Google IO 2019, Google finally announced the availability of the Flutter for Web preview version.

Flutter has been created to give developers a fast development framework, and to users, a great engaging and fast experience. Flutter for web is a code-compatible implementation of Flutter that is rendered using standards-based web technologies: HTML, CSS and JavaScript. With Flutter for web, you can compile existing Flutter code written in Dart into a client experience that can be embedded in the browser and deployed to any web server. You can use all the features of Flutter, and you don’t need a browser plug-in.

Our journey to the web

Today’s web platform is richer than ever, with hardware-accelerated 2D and 3D graphics, offline and installation support, and access to the underlying operating system and hardware. The web has allowed a broad array of frameworks that build on this underlying platform to offer developers great flexibility in how they create apps for the web.

Since Flutter is written in Dart, a language that offers JavaScript compilation, it was a natural next step to explore the web as a target. This also builds towards our vision of providing a portable framework for building beautiful UI wherever you want to paint pixels.

Our approach is to build a consistent toolkit that works across all platforms (rather than have two separate frameworks that have subtle deviations of behavior), to ensure that your own code runs without surprises.

At an architectural level, Flutter is a multilayer system with:

• A framework that provides abstractions for common idioms like widgets, animation, and gestures.
• An engine that renders to the target device using the system APIs it exposes.

The framework itself is written in Dart, and the roughly 700,000 lines of core Flutter framework code are the same across all platforms: mobile, desktop, and now web. The same is true for your code; we use either the Dart development compiler (dartdevc) or the Dart deployment compiler (dart2js) to compile your code into JavaScript, which can then be hosted on a server.

With Dart’s ability to compile the Flutter framework (as well as your app code) into JavaScript, our work to support the web involved replacing the low-level C++ rendering engine used by mobile apps with code that maps to web platform APIs. Flutter doesn’t merely transpile to HTML equivalents of its widgets. Instead, Flutter’s web engine offers a choice of two renderers: an HTML renderer that is optimized for size and broad compatibility, and a CanvasKit renderer that uses WebAssembly and WebGL to render Skia paint commands to the browser canvas.

Our goal for Flutter is to offer a new way to target the web platform, build on existing foundations, and provide new insights that improve the web for everyone.

How to install

In-order to develop for web you need flutter 1.5 and above, it enable support for targeting the web with Flutter, including Dart compilation to JavaScript. To use the Flutter SDK with the flutter_web preview make sure you have upgraded Flutter to at least v1.5.4 by running flutter upgrade from your machine.

$ flutter upgrade

To install the webdev package, which provides the build tools for Flutter for web, run the following:

$ flutter packages pub global activate webdev

Ensure that the $HOME/.pub-cache/bin directory is in your path, and then you may use the webdev command directly from your terminal.

In-order to add$HOME/.pub-cache/bin to your path, open path file by running below mentioned command from your terminal.

$ touch ~/.bash_profile; open ~/.bash_profile

It will open the file with TextEdit, make sure to have a reference to all components in your PATH and save it. If you open it again you’ll find your edits.

flutter sdk: 
export PATH=$PATH:[Path to your flutter directory]/flutter/bindart sdk: 
export PATH=$PATH:[Path to your flutter directory]/flutter/bin/cache/dart-sdk/binwebdev:
mac: export PATH=$PATH:$HOME/.pub-cache/bin
windows: %USERPROFILE%\AppData\Roaming\Pub\Cache\bin
linux: $HOME/flutter/.pub-cache/bin

 

 

Now that we are done setting up our development environment, let’s move forward to the next step of creating a web project.

Tools support for Flutter web development

Once the environment setup is done, you are gonna be needing an IDE to start developing for web. Choose your favourite IDE and follow the step by step instructions available below:

Visual Studio Code

Visual Studio Code supports Flutter web development with the v3.0 release of the Flutter extension.

• install the Flutter SDK
• set up VS Code
• configure VS Code to point to your local Flutter SDK
• run the Flutter: New Web Project command from VS Code
• after the project is created, run your app by pressing F5 or “Debug -> Start Debugging”
• VS Code will use the webdev command-line tool to build and run your app; a new Chrome window should open, showing your running app

Using from IntelliJ

• install the Flutter SDK
• set up your copy of IntelliJ or Android Studio
• configure IntelliJ or Android Studio to point to your local Flutter SDK
• create a new Dart project; note, for a Flutter for web app, you want to start from the Dart project wizard, not the Flutter project wizard
• from the Dart project wizard, select the ‘Flutter for web’ option for the application template
• create the project; pub get will be run automatically
• once the project is created, hit the run button on the main toolbar
• IntelliJ will use the webdev command-line tool to build and run your app; a new Chrome window should open, showing your running app

Using Android Studio

In Android Studio there is no direct plug-in or template to create a web project, instead you can use Stagehand package that helps you get your web project set up. Stagehand is basically a Dart project scaffolding generator, inspired by tools like Web Starter Kit and Yeoman. In-order to create a web project with Stagehand, you need to follow the instructions below:

• install the Flutter SDK
• set up your copy of Android Studio
• configure Android Studio to point to your local Flutter SDK
• now run the following command from your terminal to install Stagehand $ pub global activate stagehand
• once Stagehand is installed, you can use it to generate a project skeleton into the desired directory. As an example, here is how you create a simple web project with Stagehand:

$ mkdir flutter_web_project
$ cd flutter_web_project
$ stagehand web-simple

And to list all of the project templates:

$ stagehand

• once the project is created, open that project in Android Studio and add the following dependencies in your pubspec.yaml file

dependencies:
  flutter_web: any
  flutter_web_ui: any

dev_dependencies:
  # Enables the `pub run build_runner` command
  build_runner: ^1.1.2
  # Includes the JavaScript compilers
  build_web_compilers: ^1.0.0

# flutter_web packages are not published to pub.dartlang.org
# These overrides tell the package tools to get them from GitHub
dependency_overrides:
  flutter_web:
    git:
      url: https://github.com/flutter/flutter_web
      path: packages/flutter_web
  flutter_web_ui:
    git:
      url: https://github.com/flutter/flutter_web
      path: packages/flutter_web_ui

• run pub get from your terminal, this will download all the necessary packages
• once done; create a lib folder in the root directory of your project
• now create amain.dart file in the lib folder and paste the following code in it:

import 'package:flutter_web/material.dart';

void main() => runApp(Text('Hello World', textDirection: TextDirection.ltr));

• once you are done; open the main.dart file present in web folder and paste the following code in it:

import 'package:fancy_proj/main.dart' as app;
import 'package:flutter_web_ui/ui.dart' as ui;

main() async {
  await ui.webOnlyInitializePlatform();
  app.main();
}

• once everything is done, you are ready to test your web project. Run your app by typing the following command in your terminal:

$ webdev serve[INFO] Generating build script completed, took 331ms
...
[INFO] Building new asset graph completed, took 1.4s
...
[INFO] Running build completed, took 27.9s
...
[INFO] Succeeded after 28.1s with 618 outputs (3233 actions)
Serving `web` on http://localhost:8080

Open http://localhost:8080 in Chrome and you should see Hello World in red text in the upper-left corner.

Getting (stateless) hot-reload with webdev

To use webdev with hot-reload, run the following within your project directory:

$ webdev serve --auto restart

You’ll notice a similar output to flutter packages pub run build_runner serve but now changes to your application code should cause a quick refresh of the application on save.

Stagehand templates

There are many different templates available for Stagehand, a list all project templates are listed below:

• console-full - A command-line application sample.
• package-simple - A starting point for Dart libraries or applications.
• server-shelf - A web server built using the shelf package.
• web-angular - A web app with material design components.
• web-simple - A web app that uses only core Dart libraries.
• web-stagexl - A starting point for 2D animation and games.