Migrate your Flutter App to Flutter for Web

Suchandrim Sarkar
Jun 17, 2019 · 5 min read

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

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

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

Install the Webdev packages:

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.


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:

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

5. Then create web/main.dart

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

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

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:

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.

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

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

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

Articles and Stories from the Flutter Community

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store