Flutter - Web app setup with VS Code and Android Studio IDE.

As we know, Flutter is a cross-platform app development toolkit that is created by Google. It has been winning the hearts of developers and businesses across Android and iOS apps. Many renowned companies like Alibaba & Tencent have adopted it to develop native mobile apps for their production apps. Now, Google has officially added web, desktop and Embedded platforms to the world of Flutter app development. So, you can use your existing Flutter knowledge to build other platform applications. You can learn more about the new added platforms support on the official website.

In this post, we going to install Flutter web packages and configure them on the system. So, you can start building Flutter web apps using the VS Code, Android Studio and other IDE. 
 

Flutter Web.

• Flutter framework support web application components that allow developers to create a web application.
• Flutter developers can use a single codebase to deploy on iOS, Android, Windows, macOS, and the Web. So, the best thing about it. You can reuse the existing Flutter mobile code to create a web application.
  
• You can use all the components features of Flutter SDK and you don’t need any browser plug-in.
• Flutter SDK for the web is a code-compatible implementation that is administered using various web technologies like CSS, HTML, and Javascript. 
• We can’t run old mobile codebase with the web application command. We need to create a separate Flutter Web project. 

flutter web architecture

The web support of the Flutter framework implementing a core drawing layer on top of standard browser APIs. It is using a combination of Canvas, DOM, and CSS. The Flutter web support provides a portable and high-quality user experience all modern browsers. The core drawing layer in Dart that used Dart’s optimized JavaScript compiler to compile the Flutter core and framework along with application into a single source file that you can be deployed on any web server. 

• The first layer is similar to the mobile Flutter architecture that consisting the Flutter framework layer which is responsible for the built-in widgets and gestures. 
• The Flutter engine is replaced with a Flutter web engine which is a lower-level implementation of Flutter widgets. It generates dart code which is converted into HTML and CSS. 
• Dart2js compiler is used to compile the code into javascript which is run on the browser.

Installation and Setup.

Now, let’s move forward and set up our IDE and SDK to develop a web project. If you have not installed Flutter SDK on your system then follow our previous post How to install Flutter on Android studio for the complete setup. After that run the following commands to install Flutter web:

1. First of all, you need to make sure you have the latest version of Flutter  SDK and Dart. After that run the following command in your terminal to switch over to the master channel.

   flutter channel master

2. Now, upgrade Flutter SDK to the latest version from the master.

   flutter upgrade

3.  After that enable web support.

   flutter config --enable-web

4. To see, if your environment is set up properly or not.

   flutter devices

 you need to run the above command only once.
 

Create a Flutter Web application

To create a new Flutter web application run the following command as we creating a Flutter web application FlutterWebApplication.

flutter create FlutterWebApplication

It'll generate source code for web structure.

Understanding the Project Structure

The project structure of Flutter web familiar if you’ve been building Flutter apps already. There are some differences between a Mobile Flutter project and a Web Flutter project. If you inspect the project structure individually you’ll notice. There is one web folder that contains an index.html which initializes the web platform before calling the main() function located in main.dart in the lib folder. However, the project’s structure can be summarized like this:

• The web folder contains our project’s HTML(index.html)  structure.
• The lib directory contains source code just like the mobile Flutter project. It has a main.dart file which is just like any main function in Flutter. All the code required for the Flutter web app goes inside this directory.
• analysis_options.yaml defines linter’s configuration of the web app.
• pubspec.yaml defines the dependencies of the project as a mobile application.

Run the web app

To run the web app on the browser, enter the following command:

flutter run -d chrome

If there aren’t any other connected devices, the -d chrome is optional as we have used below:

• VS Code
  

• Android Studio
  
  

default Flutter web demo screen:

Publishing a Flutter Web App

To publish a Flutter web app, we need to execute the following command:

flutter build web

This command will generate a build/web folder, which will include index.html and main.dart.js, along with any other files that your Flutter web app will require to publish. You need to copy the required files to the appropriate folder on the webserver.

The great thing about a Flutter web app is that the compiler generates JavaScript files that run within the browser. There’s no server-side component required to serve the Flutter web app.

Conclusions

As you can see, the development of the Flutter web is very easy even if you are not a web app developer. I’m happy and satisfied with this Technical Preview of Flutter. It’s been pretty straightforward to build a simple web App like this. But Flutter for the web is still in preview and it's up to you start Flutter web with a single code base to build for iOS, Android and Web without having to have separate projects.