Flutter For Web Development

Ever since Google released the first stable version of Flutter 1.0 in December 2018, it has been used to craft amazing and functional applications, ensuring seamless performance. The intriguing characteristics and features of Flutter have persuaded many developers to experiment with app building using Flutter. During the initial days, Flutter focused only on building cross-platform mobile applications for Android and iOS. However, web and desktop applications were always included in their planning (read the Flutter roadmap for further confirmation).

Before Flutter for web development was implemented, the project was codenamed as HummingBird. On 7th May 2019, the same was made available as Flutter for the Web preview version. And since then, Flutter application development companies have been using it to build highly interactive, graphic-rich, engaging applications. Let’s have a brief informational section about Flutter.

Flutter is Google’s brainchild initially developed for mobile-first technology; however, it can run everywhere, including smartphones, tablets, laptops, and now Desktops. Flutter for the web has a 100% code compatibility that works on standard web technologies like HTML, CSS, and Javascript.

It is an open-source UI software toolkit that offers incredible support in building impressive applications. Alibaba, The New York Times, eBay has already started reaping benefits using the Flutter framework. However, now it is the time when it will capture bigger screens (browser, desktop & laptops) as well.

With Flutter, everything is written in Dart programming language which can be compiled and used for mobile and web applications. You can reuse the Flutter mobile application code and deploy it to web servers without even using the browser plugins. However, the difference lies in the engine. For mobile applications, the Flutter engine uses Skia, C++, Dart along with a few portions of platform-specific code. But the web applications, Flutter engine relies on various technologies and tools.

Develop Flutter Web Application

What is the architecture of Flutter for the web?


As mentioned above, Flutter’s architecture for web applications is different from that of mobile. However, the app will look as natural on the web. It uses a variety of tools to render the browser support. The first layer of Flutter for web architecture consists of built-in widgets and themes.

Developers have two rendering engines options to choose from,

DomCanvas;

CanvasKit.

The engine for Flutter for web uses a Flutter web engine that generates Dart code that can be converted into HTML and CSS for the implementation of widgets. Further, the Dart2 compiler, the Javascript code is deployed on the browsers.

Develop Flutter Web Application

Few key takeaways for responsive web development with Flutter are:

The API for mobile and web applications is exactly the same; only a few features will not be implemented in the web version;

The Flutter for web is still developing, and the default interactions are evolving. Hence, a web page developed using Flutter may provide a mobile app like feel than a web application;

Chrome is the only browser supported; but, support for Edge, Safari, and Firefox is definitely under the planning.

The in-built widget which can be found on pub.dev assists in developing high-performance native applications.

Flutter treats the entire screen as canvas over which it transcends all the HTML elements and captures the control over it.

Develop Flutter Web Application

Now that you have an idea about how Flutter for web works let’s get started with the Flutter for website development.

For developing a Flutter application, you do not require any prior experience with Dart or other web programming languages. You can refer to the official documentation that will guide you with Flutter’s basics for the web. To launch a progressive web app using Flutter, you can refer to out detailed guide

For setting up your first web application project using Flutter, you need to make sure that you have Flutter version 1.5.4 or higher. Also, install Dart 2.3 for the development purpose. You can type the following in the command line for getting started.

$ flutter channel beta

$ flutter upgrade

$ flutter config --enable-web

To ensure that the right version is updated, type the following in the command line, $flutter doctor

This will give you the status of the installation. You will receive the following as a response: $flutter doctor

[✓] Flutter: is fully installed. (Channel dev, v1.9.5, on Mac OS X 10.14.6 18G87, locale en-US)
[✗] Android toolchain - develop for Android devices: is not installed.
[✗] Xcode - develop for iOS and macOS: is not installed.
[✓] Chrome - develop for the web: is fully installed.
[!] Android Studio: is not available. (not installed)
[✓] Connected device: is fully installed. (1 available)

For acquiring the build tools for Flutter for web, type the following command.

$ flutter packages pub global activate webdev

Next is to ensure that the $HOME/.pub-cache/bin directory is in the path. This will allow you to use the webdev command directly from the terminal. For macOS, type,
$HOME/flutter/.pub-cache/bin in the command line.

Now restart the system.

The next step is to pick up an IDE to build a Flutter web application. You have the following options to choose from,

Visual Studio Code;

Android Studio;

Intellij

All of these IDEs have different approaches, and depending on your comfort; you can choose your favorite one. In this blog, we will be using VS Code for web development. Open VS Code and type ctrl + shift + p to open the command palette.

Once the command palette is opened, type,

Flutter: New Web Project

Visual Studio Code will ask permission to install stagehand, which is a Dart project generator. For installing it manually, type the following in the command line,

pub global activate stagehand

By giving a name and location to your project, a basic project demo will be created for you.

pubget command will automatically run through your project in order to load necessary packages for the project.

Now, VS Code will seek your permission to install webdev automatically. However, you can install it manually by typing the following command.

pub global activate webdev

To run the project, type webdev serve in the command line. There you go, your first demo project is ready in the supported Chrome window.

There are a variety of templates available for Stagehand which are listed below;

console-full: It is a command-line application sample;

package-simple: It is a starting point for Dart libraries or applications;

server-shelf: It is a web server built using shelf package;

web-stagexl: It is a starting point for 2D animation and games;

web-simple: It is a web app using only core Dart libraries;

web-angular: It is a web application for material design components;

You can have a detailed understanding of the project structure once you start developing Flutter for web development. The list of project components will be:

dart_tool directory;

lib directory;

web directory;

Other necessary files

There are few shortcomings of Flutter for Web because it is still under development. A few of the limitations are mentioned here. Please have a look before you proceed to build a Flutter web application.

Flutter for web doesn’t extend its complete support for Plugins;

Because Flutter for web is yet evolving, you can observe a slower app performance;

It has limitations on the support of all Flutter APIs;

Hot reloading feature for web apps involves a trick. You can either manually refresh the page or type webdev serve --auto restart in the command line.

Conclusion:


We hope you have successfully built your first demo web application using Flutter for web together with us. For any further queries regarding Flutter for web, you can contact us. We help startups, and big enterprises build a responsive application using Flutter. You can also hire Flutter developers from us in order to complete an on-going project. Flutter is a promising UI toolkit and provides developers with every essential tool required to develop a classic project.


ABOUT THE AUTHOR
blog Author - kodytechnolab

Sagar Bagsariya

Principal Mobile App Developer


RELATED POSTS