Migrate your Flutter App to Flutter Web 🥳 [Updated 🚀]

Published in

Nuclei Technology Blog

4 min readMar 27, 2020

If you’re like me and wondering how you could make use of new flutter’s web app capability to deploy your cool flutter application out there as a web app , you’re absolutely at the right place :) At Nuclei , we are stepping up and upgrading our fin-tech products by venturing into the web domain.

A note to the reader :

Earlier versions of flutter required importing a separate package flutter_web to make it work for web which gave rise to many issues but now , on the newer versions , flutter web project is merged in the main flutter project and all the flutter magic you did to make your cool app now works with web with minimal changes. This article aims to help you migrate your flutter app to make it work on web too 😊 and setting the port and hostname for your web app.

Let’s start our venture 😃 :

First , we gotta make sure that we are either on the flutter `beta` channel or the master channel.
Lets open a terminal and switch to the beta channel :

flutter channel beta
flutter upgrade

Then we enable the support for web by adding into flutter’s configuration :

flutter config --enable-web

To get a list of all the available config options , just enter
flutter config -h command.

Testing time 🍾 :

If the web support was successful , you should see 2 devices listed when you run flutter devices one is the Chrome device and another is Web Server device.

flutter devices
2 connected device:
Chrome • chrome • web-javascript • Google Chrome 78.0.3904.108
Web Server • web-server • web-javascript • Flutter Tools

You can run your app directly on chrome by selecting the chrome device in your IDE before you run the app or use the following command :

flutter run -d chrome

If you want to run it from some external web browser client or something else , it makes sense to just run the web server in which case you would do :

flutter run -d web-server

Any Errors 🛑 ?

Well , if you get errors when building your app which complains that it’s not a web app, you just need to run the flutter create command on your project folder. Open the root of your project folder in a terminal and run :

flutter create .

[ There might also be a need to run it with the --org option sometimes : flutter create . --org com.exampleapp . Also make sure that your project folder name is made of only lower case letters and underscore]

Specify custom port and hostname :

Your app by default runs on localhost ( 127.0.0.1 ) which means you can’t access it from any other device on your network. If also uses a random port every time you run your app which is not what you want most of the time.
So , let’s fix this.

Set the port using the --web-port option and set a globally accessible hostname ( 0.0.0.0 ) using the --web-hostname option like so when you run your app :

flutter run -d chrome --web-port 55555 --web-hostname 0.0.0.0

Now you can access your web app by opening any web browser in any of your devices in your local network by entering the following address :

http://<your-ip-address>:55555http://192.168.0.100:55555

If you are running the web app from your IDE (Android studio or VScode) , you can specify the port and hostname by specifying the additional arguments option on Android Studio like so inside the Run Configurations

If you are using VSCode 🎊 , then you can set it in the launch.json options.

{
	"name": "Flutter",
	"request": "launch",
	"type": "dart",
	"args": ["--web-port", "55555" , "--web-hostname","0.0.0.0"]
}

Build and DEPLOY ! ! !

Now that you have converted your app into a web app , its time to build it and deploy it on free static web hosting services like netlify.com or surge.sh . To build your web app , run the following command in your project.

 flutter build web

This will create the build/web folder which you can deploy later.