Flutter – Setup for Web Development

As we know, the Flutter is growing day by day and become more powerful in just a small-time span. Initially, the flutter SDK released for Mobile App Development. But, now it is not limited to Mobile Apps, It also is available for Web and Desktop Application.

Today, We learn how to make your first Web App using Flutter.  Switching Flutter to the web does not require any hard configuration. By using some commands we can easily move to the web. Let’s get to one of the most exciting features on the Horizon for Flutter which is Web Development.

Configuring Flutter for Web Project

   1. Let’s start by switching to the Master Channel. Run the following command in your terminal.

flutter channel master

   2. Then upgrade your channel to the latest version

flutter upgrade

  3. Then you have to enable the web flag to get Web Support for your project. You may restart your project after this step.

flutter config --enable-web 

  4. Now, we can check that is every this is fine working by running the doctor command in the terminal.

flutter doctor

You can check that your channel is which to Master Successfully

We can also check the devices which are available for launching your Web App. Because web app needs a browser to be run. Run the following command and you will see the list of the browser available on your system.

flutter devices

Output

   Now, we have configured the Flutter for Web.

 Now we create the Web Project

1.   Let’s start to create a Flutter Project by running the simple and most powerful command in the Flutter. If everything is going to be fine. We see the index.html file in the terminal

flutter create <your _projectName>

# In this case we named the project is web_flutter

See index.html file is added to our project

2. Now, Your Project is ready to run on the Web. Just run the last Command which is.

flutter run -d chrome

 You can use any of the available devices. After running this just wait for some time, it may take some time for the first time. 

   Some Points to be Remember:

• If you get the error regarding firewalls. You can run the following commands.

flutter clean

And then

flutter run -d chrome

• If you have to move again to Mobile development, then you have to switch to the stable channel.

Now, all flutter web setup is done. Hope this is helpful and if there is any correction.