Flutter on the web for web developers
If you come from a web development background, this section is for you. Even if you don’t come from a development background, this section still might help you in understanding Flutter on the web in a more meaningful way. You cannot look at Flutter on the web the same way you look at web development. If you look at it that way, you will find lots of things about Flutter on the web that you will not like. Like some others online, you may feel that Flutter on the web is not performant, not ready for the web yet, and so on. As we have already talked about what types of apps benefit from Flutter on the web and what types of apps are not yet suitable to build using Flutter on the web earlier in this chapter, there’s no point arguing again here about the performance and web readiness of Flutter.
To understand Flutter web development, first, you need to understand how Flutter works for mobile apps and how it’s unique.
Flutter as a UI framework
You need to look at Flutter on the web from the fresh perspective that it’s fundamentally different from web development using HTML. Flutter is designed to develop rich, interactive UIs, whereas the web traditionally was designed to serve textual content. But with advances in web technologies, nowadays we deliver all sorts of content on the web, including images, videos, and even graphics intensive games. You also need to think from the point of view that, even though the web is a different platform, Flutter on the web works a bit differently. Flutter is an app-centric UI framework. The web apps built with Flutter provide more of an app-like experience, instead of a traditional web-like experience. We should aim to use that to our advantage.
The first difference we need to understand is that the UI and logic we write with Flutter don’t translate to HTML elements, CSS, and JS one to one. Almost every piece of logic and UI that we write is translated to JavaScript, and the UI is rendered using a combination of the Canvas element, some CSS, SVGs, WebGL, and Web Assembly. Flutter has two different renderers for the web: an HTML renderer, and a CanvasKit renderer. We will learn in detail about these in Chapter 4, Web Flutter under the Hood. However, the fundamental difference is that the HTML renderer uses combinations of HTML elements, CSS, Canvas elements, and SVG elements, and is smaller in terms of download size. Whereas, CanvasKit is fully consistent with Flutter mobile and desktop and has faster performance with higher widget density, but has a bigger download size.
The next difference is that Flutter is not designed for a traditional web experience. We should also keep in mind that the web has also changed a lot since it was originally launched as a medium for sharing text. Only because of this advancement in the web has it been possible to serve all sorts of content including videos, games, and other rich and interactive UIs. Applications built with Flutter are suitable for the modern web.
The next thing that you need to understand is that Flutter on the web is a single-page, client-side application. When a user requests the application, the whole application is loaded entirely in memory. The application requests the information required for different parts of the application and loads it dynamically during execution. That also means that server-side rendering is not yet possible for Flutter web applications. Everything must work on the client. Because of this, SEO is terrible at the moment with Flutter. Though there are some packages in the works by the community, such as https://pub.dev/packages/seo_renderer, which tries to resolve the SEO problem, there hasn’t been any significant progress. So, applications such as blogs might not yet be suitable to be built using Flutter.
Finally, you need to understand that Flutter is not designed to build web pages or websites as we know them. We are not building Flutter web apps to serve traditional web content. Flutter is used to build app-centric, graphics-rich, and interactive applications. Flutter web applications are able to provide the same experience as their mobile application counterparts.
So, while thinking about building your next Flutter web application, do not think in terms of traditional web pages and websites. Rather, think of a mobile application or highly interactive content being delivered via the web.