Understanding Flutter Web: A Guide to Creation

6 min readJun 20, 2024

Hello! 👋

Allow me to introduce myself first. I am currently working in the IT field as a mobile developer. This blog is my first, and I’ve decided to write about a topic related to my job and development. After some thought, I have chosen “Flutter Web” as the subject of my first blog post.

You may wonder why a mobile developer like me chose to write about web development. The answer is simple: I want to explore building web applications using the Flutter framework, which is traditionally used for mobile development. This allows me to learn something new while leveraging my existing skills. As I study and gain new insights, I want to share everything I learn through this blog.

With the introduction complete, let’s review what Flutter is.

Flutter?

Flutter is an open-source UI software development kit created by Google. It allows developers to use a single codebase to create cross-platform applications. With Flutter, you can build apps that run on the web, Fuchsia, Android, iOS, Linux, macOS, and Windows. The Flutter framework is written in the Dart language.

Many frameworks can be used to create a web application. I chose Flutter for the following reasons:

As a mobile developer, Flutter is a familiar framework to me.
It allows for a single codebase, meaning that with one project, you can develop and run apps not only for the web but also for other platforms using the same code.
Flutter engineers can create native-like applications more quickly and at a lower development cost.
Additionally, its “custom UI” and “hot reload” features are significant advantages.

So, let’s dive into the Flutter Web.

Flutter Web?

Flutter Web delivers a consistent user experience across both mobile and web platforms. It utilizes the Flutter framework exclusively, which means it is developed entirely using the Dart language. With Flutter’s Dart code, you can target multiple platforms within a single project and deploy applications accordingly.

Anatomy of an App — Figure 1 : Anatomy of a Flutter app

The image above illustrates the Anatomy of a Flutter app. The following diagram gives an overview of the pieces that make up a regular Flutter app generated by “flutter create”.

Dart App

Composes widgets into the desired UI.
Implements business logic.
Owned by app developer.

Framework (source code)

Provides higher-level API to build high-quality apps (for example, widgets, hit-testing, gesture detection, accessibility, text input).
Composites the app’s widget tree into a scene.

Engine (source code)

Responsible for rasterizing composited scenes.
Provides low-level implementation of Flutter’s core APIs (for example, graphics, text layout, Dart runtime).
Exposes its functionality to the framework using the dart:ui API.
Integrates with a specific platform using the Engine’s Embedder API.

Embedder (source code)

Coordinates with the underlying operating system for access to services like rendering surfaces, accessibility, and input.
Manages the event loop.
Exposes platform-specific API to integrate the Embedder into apps.

Runner

Composes the pieces exposed by the platform-specific API of the Embedder into an app package runnable on the target platform.
Part of app template generated by flutter create, owned by app developer.

You can learn more details from this link: Architectural Overview.

Flutter’s Web Support

While you can do a lot on the web, Flutter’s web support is most valuable in the following scenarios:

A Progressive Web Application built with Flutter: Flutter delivers high-quality PWAs that are integrated with a user’s environment, including installation, offline support, and tailored UX.
Single Page Application: Flutter’s web support enables complex standalone web apps that are rich with graphics and interactive content to reach end users on a wide variety of devices.
Existing mobile applications: Web support for Flutter provides a browser-based delivery model for existing Flutter mobile apps.

The browsers supported by Flutter Web include the following:

During development, Chrome (on macOS, Windows, and Linux) and Edge (on Windows) are supported as the default browsers for debugging your app.

So, let’s create a Flutter web project.

Project Creation

There are two ways to create a web project:

Creating a new project
Adding a web application within an existing project

You can choose either method to get started.

1. Creating a new project

The first method involves creating it through the IDE. Alternatively, you can create it using the command line in the terminal.

Here’s how to create the project through the IDE:

File >> New >> New Flutter Project

In the ‘New Project’ dialog, select ‘Platforms’ and choose ‘Web’ since we are creating a web application. If you didn’t select ‘Web’ when initially creating the project, don’t worry; you can still add a web application using the second method, ‘adding a web application to an existing project’.

Now, the second method involves creating a new web application project from the terminal. Navigate to the desired folder in your terminal and run the following command:

$ flutter create my_app
$ cd my_app

2. Adding a web application within an existing project

Now, here’s the second method, which involves creating the project from the terminal using a command line interface.

$ flutter create — platforms web

If you encounter the error ‘Platform is not supported’, you can resolve it using the following command line:

$ flutter config — enable-web

So, the project creation part has been successfully completed. The application’s features, functions, and UI/UX can now be developed using Dart language as usual. After completing the development phase, to run and build the app, let’s move on to the next step…

Run/Debug the App

To run/debug the application during development, you can select the target device from the IDE and run it, or alternatively, you can use the command line.

Select Chrome or Edge as the target device in Android Studio, IntelliJ IDEA, or VS Code.
Alternatively, you can run the following command in the terminal at the project root:

$ flutter run

$ flutter run -d chrome 
#if there is no other device "-d chrome" is optional.

This command launches the Flutter web app in Chrome. Replace chrome with edge if you prefer to use Microsoft Edge.

Build the App

To host the application on the server, you need to build it. You can build it by selecting ‘Build’ from the IDE. Alternatively, you can use the following command line to build for the web:

$ flutter build web

$ flutter config — enable-web 
#to solve the “not supported” error

Finally, you will see the ‘web’ folder within the generated ‘build’ folder of the project.

Figure 6 : “build” folder under the project

Ta-da! Now you can easily host and deploy your beautiful Flutter web application to users.

This blog summarizes what I’ve learned. For more detailed information, please visit Flutter’s website: Architectural Overview, Flutter Web, Flutter Web Building. Now you can save time and effortlessly deliver stunning Flutter web applications to your users. If you have any questions or need assistance, feel free to leave a comment below. Thank you! 🙏