New DOM renderer for Flutter web

[mrgzi]

Introduction

It would be great a DOM renderer into the Flutter framework for building websites. The primary goal is to expand Flutter's web capabilities by improving SEO, enabling server-side rendering, and ensuring compatibility with popular front-end tools such as Vite.

Related Issues

Issue #46789: Improve SEO for Flutter web apps
Issue #47600: Add support for server-side rendering in Flutter for web

Proposed Solution

The main idea is to introduce a new 'runPage' method that directly renders components to the DOM instead of Flutter's existing engine. Key aspects:

• New components library designed specifically for DOM rendering
• Support for Client-Side Rendering (CSR), Server-Side Rendering (SSR), Static Site Generation (SSG) and Incremental Static Regeneration (ISR)
• Hybrid rendering design for routes
• Widgets and dom elements interoperability support
• Compatibility with popular front-end tools

[jsloop42]

We have many clients asking for things like automation testing using the final running html site using tools like selenium and currently I have not found a way to do this. Also Flutter has got a lot of potential as a cross platform tool and I see more people wanting to use it for web app as well apart from mobile apps. However for websites that requires SEO currently Flutter is a blocker. Having a way to use DOM elements directly would be highly beneficial but I also think that is going to be a lot of work.

My main goal is to use selenium for flutter web and SEO. If it can be done using existing solutions it would be great or a DOM renderer. Thanks.

Edit: Since the proposal was edited. I am looking for using the same widget and generating DOM elements instead of separate components.

[yjbanov]

This idea makes sense, and we've discussed it a number of times. While we plan to address indexability, e.g. for search engines, a DOM mode can still be useful in the context of Flutter for certain use-cases. Not everything needs to be an "app", and not all Dart needs to be cross-platform. There may be good use-cases for web-specific Dart code that shares codebase with the app but handles "surrounding" functionality. For example, apps tend to have websites attached to them. Consider https://rive.app vs https://editor.rive.app. You first land on Rive's website, and then you launch the app. Since Flutter started as a mobile app framework, we never optimized for non-app use-cases. Mobile apps don't include websites. Their "landing pages" are just App Store and Play Store presences. If an app has a website, it is a website you have to open in a browser, which is detached from the app itself. However, in Flutter Web's case the user is already in the browser, and therefore there's an opportunity for tighter integration between the cross-platform app and web-specific parts of the user experience.

So far we have not dived deep into this due to opportunity cost. We'd have to stop working on something in order to accomodate a DOM mode. But the feature request makes sense, so I'll accept it, but it's unlikely to make it to the top of our work queue soon.

[MarkOSullivan94]

For people who are wanting this have you considered Jaspr as an alternative?

[jsloop42]

For people who are wanting this have you considered Jaspr as an alternative?

In my use case it's not a standalone web app. We are developing for iOS, Android and Web. We use the same code base and sometimes different widget specific for web layout.

[mrgzi]

Not everything needs to be an "app", and not all Dart needs to be cross-platform.

I think it will be still cross-platform because we will be able to use the same logic. In Flutter to write a ui is very easy and fast therefore developers will not mind to write seperate ui for web. Even though we can't use the same logic, I would still love it to write a website using Flutter.

Consider https://rive.app vs https://editor.rive.app. You first land on Rive's website, and then you launch the app.

Yes! Thats why to providing interoperability between widgets and components will be very useful. It will also decrease initial website loading because I don't think that Flutter engine will initialize under 0.5 second anytime soon in the browser. When developer want to use a widget inside a component, they can show progress indicator while the engine initialization. First think coming to my mind is that to be able to use fl_chart widgets in somewhere of the website.

[miyoyo]

My fundamental disagreement with this proposal is more of a question of scope than a question of possibility.

There seems to be two parts to this request:

1. Editing the surrounding HTML that hosts the canvas flutter draws on

• No issue with that, really

2. Using flutter to render DOM components, or a hybrid dom/canvas implementation

• Now that's where the conflict is

Is it possible to make a full flutter implementation in pure dom that can be serialized and sent to the client for instant render? Maybe.

Is it possible to make a fully hybrid dom/canvas intermingle that also respects CSS, Z Index and two not-exactly-the-same constraint and sizing systems? Maybe.

Is it something flutter should do? I don't believe so.

This is not just a small request here, this is basically asking the flutter team to reinvent web once again, but this time to integrate and work around the limitations and the requirements of a full blown web document, the initial idea behind flutter being not using the damn thing in the first place.

Flutter is great, don't get me wrong, I love it, but trying to be "the everyframework" in every single possible way will either result in it stalling because of no focus, or ending up with a terrible compromise on all platforms.

[mrgzi]

Flutter is great, don't get me wrong, I love it, but trying to be "the everyframework" in every single possible way will either result in it stalling because of no focus, or ending up with a terrible compromise on all platforms.

I disagree with this. Flutter already supports many platforms, even for embedded devices. So far this didn't make the flutter "the everyframework" but the target website will make it? Websites are the last thing Flutter needs to start supporting

[oravecz]

Flutter is great, don't get me wrong, I love it, but trying to be "the everyframework" in every single possible way will either result in it stalling because of no focus, or ending up with a terrible compromise on all platforms.

I disagree with this. Flutter already supports many platforms, even for embedded devices. So far this didn't make the flutter "the everyframework" but the target website will make it? Websites are the last thing Flutter needs to start supporting

I think you drastically underestimate the amount of resources necessary to accomplish this. I am hoping that the new WASM model is highly prioritized and no resources are spent chasing this I’ll-fated concept.

To the people who want the Flutter SDK to generate a pure DOM output, put together a POC to show how the render objects can output this structure. I suspect there is a really good reason why the existing DOM renderer produces the output it does.