Flutter Web Announced in Google IO19 — How To

Karthik Ponnam

Published in

Flutter Community

3 min readMay 9, 2019

Hello friends,

Here we have big news from flutter team in IO19

Flutter now announced their support for web. for more details you can https://flutter.dev/web

Flutter for web

Flutter for the 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.

Note: Flutter Web is still in previews
While converting your existing code in you flutter web you many face some issues

First things first

Most Important Thing make sure your path has $HOME/.pub-cache/bin

Now in order to go ahead we need webdev package to be install

flutter packages pub global activate webdev

pub global activate webdev

Now we are good to create a Flutter web project

In order to create Flutter Web Project in VSCode ctrl + shift + P then type Flutter: New Web Project then enter your project name and select destination directory to create your project

Now wait till your project is created and all the dependencies are installed

Once your project is ready you can run it using the command

webdev serve

Once you run the command you will see the following success message and the port in which our local server is deployed

Project Folder Structure

Here we have one new folder web which contains main.dart file and some *.html files

In this folder, you can also place fonts, images, etc.,

Inside web/main.dart the file we can see the below code

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

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

The above code at first initializes the Web Platform then calls our app from lib/main.dart

index.html the file contains some base HTML code which has one important line

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <script defer src="main.dart.js" type="application/javascript"></script>
  </head>
  <body></body>
</html>

This below line include js generated by dart2js

<script defer src="main.dart.js" type="application/javascript"></script>

Inside pubspec.yaml file

name: flutter_web_demo
description: An app built using Flutter for web

environment:
  # You must be using Flutter >=1.5.0 or Dart >=2.3.0
  sdk: ">=2.3.0-dev.0.1 <3.0.0"

dependencies:
  flutter_web: any
  flutter_web_ui: any

dev_dependencies:
  build_runner: ^1.4.0
  build_web_compilers: ^2.0.0
  pedantic: ^1.0.0

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

We can see some new dependencies flutter_web , flutter_web_ui and build_web_compilers

You can notice that there is no flutter SDK mentioned here

To serve the app with hot reload use

webdev serve --auto restart

To Serve a release version using --release or -r

webdev serve -r

To build the app

webdev build

this command will create index.html and main.dart.js file and all other needed to run the app over HTTP server

To optimize the Output

# See https://github.com/dart-lang/build/tree/master/build_web_compilers#configuration
targets:
  $default:
    builders:
      build_web_compilers|entrypoint:
        generate_for:
          - web/**.dart
        options:
          dart2js_args:
            - --no-source-maps
            - -O4

Sources:

Thanks for your time.

Hope you like it, if yes clap & share.