Yes! But not always. Flutter Web is a great tool to build certain web apps. However, it can be easily misused and not fit your needs. Let’s try to understand when it is worth using the Flutter Web.
What exactly is Flutter?
Flutter is known as a highly performant tool for building mobile apps. It gained much popularity in 2020 and is overgrowing. The main reason why people want to develop mobile apps with Flutter is that it allows you to build Android and iOS apps from one codebase. It’s a game-changer. Before this type of solution, you had to hire two teams for two different projects for Android and iOS. This solution is now also available for web apps.
How does Flutter Web work?
Besides Android and iOS, Flutter allows you also to build web applications from the same codebase. Does it mean that you can run any app prepared for mobile as a web app?
In most cases, yes. However, a good quality web application will require UI tweaks and preparation for more giant screens. If your mobile app uses some mobile-specific APIs like a camera or local storage, implementing these features in a web app may be more challenging or even impossible.
Flutter Web can use two rendering engines: HTML or CanvasKit. It’s up to the development team which one should be used. Both have their advantages and disadvantages, which we will discuss later.
When building with Flutter Web brings business value?
Web and simultaneous mobile development
If you plan to create an app for mobile and web simultaneously, Flutter might be your go to solution. Building your whole product from one codebase with one team of developers may sound unbelievable, but it’s possible now.
User interfaces will need to be built responsively. That’s because mobile apps and web apps work on different screen sizes and resolutions. In some cases, the web version of a screen might need to be utterly other than the one on mobile. In that case, Flutter also has your back as it supports platform checks, which allow you to render different screens on mobile and the Web. It’s still a huge time saver, though, as mobile and Web apps can share the same logic, styles, common UI elements, translations, and much more.
Reuse code from an existing mobile app
Another use case might be if you already have a Flutter mobile app and want to work on a web version. In that case, you can use already existing logic and UI elements to output web apps faster than using other web frameworks. The web version of your app doesn’t have to implement all features the mobile one does. For example, you can create a simple landing page with a sign-up and sign-in page on the web version. However, for the full experience, users will be carried to a mobile app store.
Companion apps
Many of our clients also leveraged Flutter for web apps that are companions to mobile apps. An example of this can be an admin panel for your mobile app, demo app, or proof of concept that shares code with a more extensive system already built with Flutter.
Does it make sense to use Flutter Web when mobile apps are out of the picture?
Flutter allows you to build highly performant and interactive web apps. However, it’s not made for static web pages. Flutter is ideal for single page interactive apps with animations and heavy UI elements. In the case of static web pages with a lot of dense text, a more classic web development approach might bring better results, faster load times, and easier maintenance.
Flutter Web advantages
- Flutter is able to handle large chunks of data.
- Great ability to render graphical effects, transitions, and animations.
- Outstanding support for both Material and Cupertino design UI elements.
- Renders animations in up to 60 frames per second.
- Huge amount open source and commercial libraries on pub.dev
- Ability to implement a game engine for specialized products with advanced animations and physics.
- Ability to be integrated with already existing web app as embedded elements.
- It’s possible to run JS code from within Flutter Web. Great option if there is some JS library or SDK you need to use.
- PWA support.
Flutter Web disadvantages
- Flutter Web is not SEO friendly. If you plan to base your product marketing on search engines, other web frameworks might provide better results.
- The load size is much larger than on more popular web frameworks.
- HTML minimum payload is 1.8MB
- CanvasKit adds an additional 2MB to the payload giving better performance in return.
These values may look poor when compared to classic web development. However, it’s a trade-off for Flutter’s abilities.
- Web developers will not have the ability to modify generated HTML, CSS, and JS code.
Contact
Do you want to find out more about building a web app with Flutter Web?
Is Flutter Web suitable for web app development?
As you can see, the answer to a question asked in the title is not straightforward. Flutter Web can bring considerable benefits to your business if used correctly. It’s essential to understand what kind of framework Flutter Web is. Misusing the framework may lead to underperforming solutions.
