Getting Started with Flutter Web

Flutter is Google’s portable UI toolkit for building beautiful, native applications for mobile, web, and desktop from a single codebase. At this year’s I/O event, technical preview of the Flutter SDK that lets you take Flutter UI code and business logic and run it directly in the browser.

Flutter web architecture

The overall architecture of Flutter on the web closely resembles Flutter on mobile:

Flutter for web architecture

The Flutter framework (green in the diagram above) is shared between the mobile and web offerings. It provides high-level abstractions for the UI foundations of Flutter, including animation, gestures, base widget classes, as well as a Material-themed set of widgets for most common application needs. If you’re already building on Flutter, you will feel immediately at home with Flutter for the web.

Getting Started

Hummingbird is Flutter running on the web

Flutter 1.5 and above 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. If you're actively developing for Flutter for web, you may prefer to be running from one of the unstable channels. Our wiki describes the Flutter channels and how to select the right one for your needs.

1. Clone the flutter_web source code

git clone https://github.com/flutter/flutter_web.git

2. Install the flutter_web build tools

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.

Note: if you have problems configuring webdev to run directly, try:
flutter packages pub global run webdev [command].

Run the hello_world example

1. The example exists at examples/hello_world in the repository.

$ cd examples/hello_world/

2. Update packages

$ flutter packages upgrade
$ flutter packages upgrade 
! flutter_web 0.0.0 from path ../../flutter_web 
! flutter_web_ui 0.0.0 from path ../../flutter_web_ui Running 
“flutter packages upgrade” in hello_world… 5.0s

If that succeeds, you’re ready to run it!

3. Build and serve the example locally.

$ 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. 😀😀😀

Tools support for Flutter web development

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

Getting (stateless) hot-reload with webdev

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

$ webdev serve --live-reload

Building with the production JavaScript compiler

The workflow documented above (available with build_runner and webdev) uses the Dart Dev Compiler which is designed for fast, incremental compilation and easy debugging.

If you’d like evaluate production performance, browser compatibility and code size, you can enable our release compiler,dart2js.

To enable the release compiler, pass in the --release flag (or just -r).

$ webdev serve -r

Note: Builds may be slower in this configuration.

If you’d like to generate output to disk, we recommend you use webdev.

$ webdev build

This will create a build directory with index.html, main.dart.js and the rest of the files needed to run the application using a static HTTP server.

This is all for now. You can check out a more detailed guide on the Flutter.dev/web . In my next Post, i’ll provide a fix for the Icons in Flutter Web not displaying😉. Thank you for reading.