Developing Web Apps Using Flutter

Flutter was introduced back in May 2017 with the general idea of Cross-Platform app development initially for Android and iOS and aiming for Web and Desktop platform. It’s been quite a while when Flutter for Android and iOS went into stable version and even more since the first mention about using Flutter for the web. Earlier the project was codenamed HummingBird but at the Google IO earlier this month, Flutter for Web was made public as Technical Preview aiming to build highly interactive and graphics-rich content for the web. While releasing Flutter 1.0 on Dec’18 the Flutter team disclosed their further plan and goals in Flutter which involves making Flutter build apps for web and can be read from their Roadmap.

Flutter for web is a code-compatible implementation of Flutter that is administered using the various standard web technologies like HTML, CSS, and Javascript. One interesting thing that amuses me is the fact that one can reuse the existing Flutter code to be deployed into any web server, all the features of Flutter and you don’t even have to use any browser plugin.

Things to cover in this article:

1. Overview of Flutter for web
2. Creating your First web project
3. Limitations

Overview of Flutter for Web

So, Yes! Flutter being officially released for the web takes development using Flutter beyond mobile platforms, initially what was restricted just to mobile platforms has now spread its wing across the web and desktop (Linux, Window and MacOS, which we’ll talk about in another article).
Let’s understand the structure and see how Flutter works beneath the hood and compare it with the structure of Flutter for web.

So, this is the Flutter architecture for iOS and Android,

1. The first layer in the structure is Flutter framework layer which is responsible for all the built-in widgets and gestures.
2. The next second layer is the Flutter engine which is written in C++ and uses Google’s Skia as a graphics library.
3. Then there is a thin runner layer which is responsible for running the app on individual platforms.
4. And the last layer is the hardware layer which provides the necessary hardware where the app runs.

Now, let us see the architecture of Flutter for Web,

1. The first layer is similar to the general Flutter architecture consisting Flutter framework layer which is responsible for all the built-in widgets and gestures.
2. The Flutter engine has been replaced with Flutter web engine which is a lower level implementation of Flutter widgets and rewritten them. It generates dart code which is converted into HTML and CSS.
3. Dart2js compiler is used to compile the code into javascript which is ready to run on your browser.

Look at the diagram below to have a more detailed and vivid view of the internal working of the web architecture.

Creating your first web project

Now, that we understand the gist about how the Flutter web works or what’s actually happening underneath the hood, let’s move forward and set up our IDE for the web project.

Installation:

Here is the step by step approach of how to create your basic web project:

1. First, you need to make sure you Flutter version is 1.5.4 or higher and Dart 2.3 must be installed.

flutter channel master && flutter upgrade

2. To make sure that your Flutter is updated, run the following command

flutter doctor

3. Next, you need to add the .pub-cache/bin to your PATH as you will be installing a global package:

For Windows:
C:\Users\<your-username>\AppData\Roaming\Pub\Cache\bin

Restart your system.

For Linux:
$HOME/.pub-cache/bin

For MacOS:
$HOME/flutter/.pub-cache/bin

First Web Project:

1. In VSCode use ctrl+shift+p to open the command palette and type,

Flutter:New Web Project

2. VSCode will ask permission to install the stagehand, stagehand is a Dart project generator. Accept it and the VSCode will automatically install the stagehand and if you want to install it manually then type the following command in your terminal,

pub global activate stagehand

3. Then, give the name and project location to your project and stagehand will generate a basic project ready for you.

4. It will automatically run pub getcommand to load the necessary packages for your project.

5. To run the basic project you’ll need to install the webdev, normally the VSCode will ask for the permission to install webdev automatically but if you want to install it manually then type the following command in your terminal,

pub global activate webdev

6. To run the project type the following command in the terminal

webdev serve

Understanding the Project Structure:

Let’s see the basic project structure of Flutter for Web project,

The structure has the following components:

1. dart_tool directory
2. lib directory
3. web directory
4. other basic necessary files required by the flutter

lib directory:

The lib directory is what contains all your code just like your normal Flutter project, it has a main.dart file which is just like any main function in Flutter. All the code required for the Flutter app goes inside this directory.

web directory:

The web directory has two files namely,
1. index.html:

This is the starting point of your application which loads the application.

2. main.dart:

The main file in the web directory is the starting point of Flutter web application. This file calls the main method of the lib directory which contains all your code after initializing the engine.

Using assets in Flutter web application:

When you create a web project, the project structure doesn’t include any assets folder and if you try to run any pre-existing application you might come across a situation where your icons won’t be visible. 
The assets folder has to be inside the web directory of the Project.

For your application to display all the icons you must include FontManifest.json file contains all the fonts and icons required by your app.

import ‘package:flutter_web/material.dart’;

Limitations:

Even though Flutter announced the Flutter for web, it is still in Technical preview stage. You can do a lot of things but since it’s still in the early stages there are chances that things can change and as a developer, it will take time for you to explore it without any limitations.

1. As you may have noticed that you aren’t importing import 'pacakage:flutter/material.dart';instead you’re importing import 'package:flutter_web/material.dart';.This is due to the fact that flutter_web is a forked repository of existing flutter framework. This is the temporary fork and will be merged into one soon.
2. Plugins are not yet supported completely.
3. As its just the beginning, the performance might be slow.
4. Restrictions on the support of all Flutter APIs.
5. Hot reloading the web page involves a trick. Either you have to manually refresh the web page or use the terminal command to Hot reload webdev serve --auto restart.

So, We hope that you were able to create your first basic Flutter project for web and it runs successfully. You may need to handle the screen responsiveness of your app to deal with different screen sizes. We have a small module related to Flutter for web, you can view it from here.

To watch the I/O video related to Flutter for web,

We hope you liked the article and if there is something you wanna convey then you can reach us at flutterdevs.

You can also read our related articles:

BLoC pattern in Flutter – FlutterDevs
By the title, you must have got an idea about what this article will be. As Flutter is growing day by day and so it’s…flutterdevs.com

FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, and Twitter for any flutter related queries.