Run your Flutter app on the web.

5 min readMay 16, 2019

Flutter the portable UI framework for building beautiful, tailored experiences, now supports the modern web.
Google Flutter Team

As we all know, the above statement has been released with the Google I/O 2019 announcements. The developers and flutter enthusiasts who have been developing Flutter apps since it’s beta can now extend their apps to its web version. Furthermore, the team is working on the next version which makes your Flutter code runs on Desktop and Embedded platforms.

For further below is the latest Flutter for web architecture.

So, in this article, I will be trying to run the same project in every possible platform (Mobile and Web for now 😉) with flutter. Also, I will start from scratch to make it easy for the people who have not installed Flutter on their device.

Install Flutter or Flutter Upgrade

If you have already installed Flutter on your laptop you can simply run upgrade command in your terminal to upgrade your Flutter SDK version.

$ flutter upgrade

If you’re not a part of the above group, if you have not set up Flutter on your laptop you can follow below steps for a clean Flutter installation.

If you are a mac user, you can use a package manager like Homebrew to install dart SDK. So, open your terminal Just copy paste the below commands to setup brew and dart.

Install Homebrew

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

If Homebrew is your package manager at the moment update Homebrew before next steps by running following command.

$ brew upgrade

Install Dart SDK

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

After the installation is done. Check the version of your Dart SDK (dev version) not below2.3.0-dev.0.5 by executing this command in the terminal. Because Flutter web supports this version of Dart SDK not below this.

$ brew info dart

Activate the dev version of the Dart SDK

$ brew unlink dart
$ brew install dart --devel

To install Flutter on your laptop here’s a shortcut 😜

Flutter installation guidelines from Flutter official documentation

Below are the steps, you need to follow for a clean Flutter installation,

Download the Flutter SDK
Extract the installation bundle zip file in the desired location
Add the Flutter tool to your path
Run $ flutter doctor
Update your PATH variable permanently

Also, run Flutter doctor and make sure you have installed/set-up everything correctly.

In this article, I will be using IntelliJ as my IDE, So as the first step I am installing flutter and dart plugins to my IDE.

Searching for Dart plugin in the marketplace

Here’s something from the official setup guide 🔖📚

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.

Install the flutter_web build tools

To install the webdev package, which provides the build tools for Flutter for web, run the following:

$ flutter pub global activate webdev

Once you run the above command you will see a warning in your terminal like this.

In order to resolve this warning, add below line to your .bashrc, .bash_profile or .zshrc (if you’re using zsh)

export PATH="$PATH":"$HOME/flutter/.pub-cache/bin"

and close your terminal and reopen or refresh the bash profile using the following command.

$ source ~/.bash_profile

Let’s create our first flutter project which runs on the web…

Once you have completed the above steps, in IntelliJ IDE you can create a new project and from the initial project creation page, you have to select Dart from the left panel. Then it the IDE will prompt for existing dart project templates in your right. From that list, you have to select the Flutter Web App template and hit next to proceed with project creation.

In the project structure, you will see a new directory called web for all the Flutter web related things. Also, If you check the dart files in the lib folder such as main.dart file, It will be exactly the same as you are used to creating Flutter mobile apps.

In order to run the project, you can type the follwing command in your terminal and navigate to http://localhost:8080 to experience your Flutter project which runs on your browser.