Build Flutter Web app

Pre-requirements:

First of all we need the following ingredients to prepare a flutter web app:

-Flutter supporting platform for the development

-Chrome browser to run the application

Set up:

We need the latest version of the beta of Flutter SDK and we need to enable the web mode. Run the following commands:

$ flutter channel beta $ flutter upgrade $ flutter config --enable-web 1 2 3 $ flutter channel beta $ flutter upgrade $ flutter config -- enable - web

We should use the above configuration steps only once. Then for re-checking the status of flutter configuration, we can fire the flutter config command.

Now we have to restart our IDE to reflect flutter web changes. Now you will get options in the available devices list of chrome (web) devices. Or We can also check it by the below-mentioned command which shows us the chrome(web).

$ flutter devices 2 connected devices: Chrome . chrome . web-javascript . Google Chrome 78.0.3904.108 WebServer . web-server . web-javascript . Flutter Tools 1 2 3 4 5 $ flutter devices 2 connected devices : Chrome . chrome . web - javascript . Google Chrome 78.0.3904.108 WebServer . web - server . web - javascript . Flutter Tools

Create and Run:

To create a new flutter project for the web as well as mobile support, we have to fire the following command.

$ flutter create myapp $ cd myapp 1 2 $ flutter create myapp $ cd myapp

It will create a new project which is located in myapp directory. For that, we have to change the directory by second command.

To run the project, we can use the following command along with the device name. If there is no device connected, then it will run default to the chrome(web) browser to serve your app from localhost.

$ flutter run -d chrome 1 $ flutter run - d chrome

Above command will launch our application to the chrome browser from the localhost.

Build:

To prepare the release or debug build, the following command is used.

$ flutter build web 1 $ flutter build web

We can also use flutter run –release to generate release build. At the time of the above command execution, build uses dart2js instead of development compiler to generate a single JavaScript file like main.dart.js. After the command execution, we can find build/web directory which contains main.dart.js file, built files as well as needed assets resources which will be served together in server.

Add web support for existing flutter project:

If we have developed our application for only mobile support, there is a way to add web support to the existing application by using the following command:

$ flutter create . 1 $ flutter create .

We can find a Web directory inside our project which suggests that web support is set properly. After that run the project to the chrome browser and serve from localhost.

Being in beta, Flutter for web already provides various functionalities such as responsive views, hover effects, hardware keypress events and more. Here is a glimpse of the app I have built using Flutter Web.



