Migrate your Flutter App to Flutter for Web

Recently Google released the technical preview of Flutter Web, an extension to Flutter for the modern web. So what does this mean? It means that now it’s possible to have one single code base for Android, iOS and the Web. Since Flutter is built using Dart, which includes production-quality compilers for both native machine code and JavaScript, web support was just a matter of time.

Web Version

Native Android Version

Limitations as of now

As mentioned above, Flutter Web is still in technical preview and the team has suggested to not use it for production. There are a couple of other issues as well which made the experience less smooth for me:

1. There is no way as of this moment to directly generate the web build without making changes which would affect the mobile versions. For example,(shown below) packages across the code need to be changed for the web version.
2. Libraries that are mobile-specific like cupertino_icons needs to be manually removed frompubspec and cannot be handled in real time.
3. Chromium-based browsers and Safari is supported and tested as of now, Firefox and Edge will be supported completely, but testing on them now is limited. IE support is not planned

This means, as of now we will have to maintain a separate branch or code base for the web build even though the core code will remain the same.

It’s not that bad

So the above might have turned you off a little bit, but it's not as bad as it sounds. I had almost zero issues in migrating and even though it’s a technical preview, the web version built in the first time. I have an example Flutter app which I built months ago using BLOC pattern and I recently made the Web version of it. It works perfectly on Safari and Chrome both on a Mac/PC and iPhone/Android. You can check out the code here:

Mobile Branch

Web Support branch

And the website is live and working as well. Check it out: AddIt Web Version

I didn’t have to change any business logic or UI for the web version. Just some setup changes and removing two mobile-only libraries cupertino_icons & shared_preferences. I used RxDart as well for implementing BLOC pattern, which worked perfectly on the web.

Now that you are at ease, let’s get started.

Lets Gets Started

Let’s configure your machine to run Flutter Web. If you don’t have Flutter installed, then follow this official link for the complete setup. Then Run the following command to upgrade your flutter

$ flutter upgrade

You then need the Dart SDK for web, which was not a requirement for Flutter.

$ brew tap dart-lang/dart
$ brew install dart

Your Dart version be over 2.3.0 to support Flutter Web, which you can find out by

$ brew info dart

Install the Webdev packages:

$ flutter packages pub global activate webdev

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

Migration

I would highly recommend having a separate git branch for the web build and if you are not using a VCS, create a copy of your present Flutter project and work on that.

1. Open your pubspec.yaml and make the following changes:

name: my_app

version: 1.0.0

dependencies:
  ## Replace flutter SDK dependency with flutter_web
  #flutter:
  #  sdk: flutter
  flutter_web: any

dev_dependencies:
  ## Similarly replace test libraries to web test libraries
  #flutter_test:
  #  sdk: flutter
  flutter_web_test: any

  ## Add these dependencies to enable the Dart web build system
  build_runner: any
  build_web_compilers: any

  test: ^1.3.4

## Assets are handled differenly in web. So remove them from here
# flutter:
#   uses-material-design: true
#   assets:
#     - asset/
#
#   fonts:
#   - family: Plaster
#     fonts:
#     - asset: asset/fonts/plaster/Plaster-Regular.ttf

## Add the following:
## 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
  flutter_web_test:
    git:
      url: https://github.com/flutter/flutter_web
      path: packages/flutter_web_test

2. Then you need to do some Application-wide replacing:

Change imports of package:flutter to package:flutter_web
Change imports of dart:ui to package:flutter_web_ui/ui.dart

3. Then create a directory web/ , similar to the android/ and ios/ .This directory will have the starting points for your web app.

4. Create a web/index.html file which is the entry point of your web-app

<!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>

5. Then create web/main.dart

import 'package:flutter_web_ui/ui.dart' as ui;

// TODO: change `my_app` to refer to your app package name.
import 'package:my_app/main.dart' as app;

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

6. You are almost there. Now in your project, run

$ webdev serve

You should see something like this if everything goes right

Note: If you face any issue with webdev, you can run the following as a workaround

$ flutter packages pub global run webdev <command>

7. Now open http://localhost:8080 in Chrome, and your web site would be there after waiting a couple of seconds of building. The build progress is visible on the terminal

Publishing your Web App

The above sections shows how to generate a debug build. But you would want to release it as well.

1. The workflow above uses the Dart Dev Compiler which is designed for fast, incremental compilation and easy debugging. You can evaluate production performance, browser compatibility and code size, you can enable our release compiler,dart2js. Run the following:

$ webdev serve -r

2. Finally, time to generate a final build of your web app. By default, the output is generated into thebuild directory which may already exist. So you can mention the output directory.

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

$ webdev build --output <Directory Name>

3. Now, you can host the code anywhere you want (I hosted in on the repo’s GitHub pages by pushing intogh-pages branch)

4. You can run the website locally as well using http-server. Run

$ npm install -i http-server

Then go to your root directory which has the index.html file and just run

$ http-server

If you face any issues or just want to connect, you can on Twitter

Flutter Community (@FlutterComm) | Twitter