How To Create Web App In Flutter 2.0

Photo by Immo Wegmann on Unsplash

Flutter has recently released version 2.0. The good news is that in this release, web support is now available on the stable channel.

If you are interested to read more about what’s new in that release, you can read it here.

In this short tutorial, we’ll look into the steps to create a web application in Flutter.

I am assuming that you have the latest stable version of Flutter 2. If not, you can install Flutter on your operating system from this official documentation link.

Setup

First, make sure that you are on the stable channel and you have fully updated FlutterSDK by running the following commands:

$ flutter channel stable
$ flutter upgrade

Next, you need to check the device(browser in this case) available to open your application.

$ flutter devices

You should see an output something like this:

Chrome (web) • chrome • web-javascript • Google Chrome 89.0.4389.90

Create

Creating a web project in Flutter is similar to creating any Flutter project for other platforms which is superb! Just run the following commands:

$ flutter create mywebapp

The first command above will download a sample Flutter application with a pre-written counter code in that. Now to run the app, we’ll need to go into the projects directory:

$ cd mywebapp

Run

Running the application is super easy. All you need to do is to run the following command:

$ flutter run -d chrome

You should see the following screen:

After you finish, just close the browser or press “q” in the command line to quit the application.

Important Note: The web browser does not support the famous hot reload feature yet.

Release

In order to generate a release build, run the following command:

$ flutter build web

As per official documentation:

A release build uses dart2js (instead of the development compiler) to produce a single JavaScript file main.dart.js.