What you can build with Flutter on the web

We can build any kind of app in Flutter and then successfully port it to the web. Does that mean we should build all web apps with Flutter? If not, how do we decide what and what not to build with Flutter on the web? The following scenarios are some examples of when it would be beneficial to choose Flutter instead of traditional forms to build web applications. You can also refer to these great case studies of applications built with Flutter on the web available on the official Flutter documentation while deciding what kind of applications benefit from Flutter on the web:

• Supernova (https://flutter.dev/showcase/supernova)
• Rive (https://flutter.dev/showcase/rive)
• iRobot (https://flutter.dev/showcase/irobot)
• Flutter Gallery (https://gallery.flutter.dev/)

And here are some community examples, built with Flutter on the web:

• Flutterando Community (https://flutterando.com.br/#/)
• Flutter Shape Maker (https://shapemaker.web.app/#/)
• Rows Spreadsheet App (https://rows.com/)

Progressive Web Applications

Progressive Web Applications (PWAs) are a quite recently introduced form of web application that tries to bring the best of both worlds – applications and the web. We will learn more about PWAs later, in Chapter 11, Building and Deploying a Flutter Web App. Flutter delivers high-quality PWAs that are integrated with a user’s environment, including installation, offline support, and tailored UX that is the same as Flutter’s mobile application. So, at the moment, Flutter is a very suitable choice for building a PWA.

Single-page applications

With Flutter being a client-side framework, it is a great option for building 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

If you already have a mobile application built with Flutter and want to target new users on a web platform, Flutter on the web would be a great choice. With few or no modifications to your existing code, you will be able to easily port your existing application to the web and target a wide range of users and devices.

Now, before we dive into developing awesome web apps using Flutter, read and keep in mind the following paragraph from the official Flutter documentation (https://flutter.dev/web):

Not every HTML scenario is ideally suited for Flutter at this time. For example, text-rich, flow-based, static content such as blog articles benefit from the document-centric model that the web is built around, rather than the app-centric services that a UI framework like Flutter can deliver. However, you can use Flutter to embed interactive experiences into these websites.

Here, we need to understand that Flutter is an app-centric UI framework designed to build interactive experiences, which may not be suitable for all kinds of websites and web applications.

Deciding when to use Flutter on the web

This is not a definitive guide to help you decide when to use Flutter on the web. However, this might help you in the process of deciding whether or not to build your next web app with Flutter.

With web applications, one thing I can say for certain is that if you have the time and budget to build a native web application, build it. Build a native web application with HTML, CSS, and JS, the languages of the web. Also, if the web is the primary focus of your business, and most of your target customers are on the web, I suggest going native.

However, in scenarios in which you have mobile applications built with Flutter and most of your customers are on mobile applications but you want to quickly try the web platform to get more target customers and get more traction for your business, Flutter on the web would be a quick and cost-effective choice.

When you are planning to build a PWA or a graphics-intense, interactive application, Flutter would still be a suitable choice. Choosing Flutter will also allow you to build for mobile and desktop platforms using the same code base.