Flutter is a good fit for web apps such as dashboards, portals and tools behind a login, but a poor default for content sites that must rank. Flutter web draws its interface on a canvas, so text is not ordinary HTML. For Flutter web SEO, serve the pages that must rank as real HTML and keep Flutter for the interactive parts.
Flutter is excellent at one thing: building the same polished interface for mobile, desktop and web from a single codebase. Search engines, however, were built to read documents, and a Flutter web app is not a document. This guide explains what a Flutter web build actually outputs, what crawlers can and cannot read, when Flutter is the right tool for a website, and the pattern that lets you have both a rich Flutter experience and pages that rank.
What does Flutter web actually output?
A traditional website is a tree of HTML elements: headings, paragraphs, links and images. The browser reads that tree and so does every crawler. Flutter takes a different route. It ships its own rendering engine to the browser and paints every pixel itself onto a canvas element. Buttons, text and layout are drawn, not described.
The renderers have also changed. Flutter used to offer an HTML renderer that mapped some widgets to DOM elements, but the Flutter team deprecated and removed it, leaving the canvas-based renderers (CanvasKit, and Skwasm for WebAssembly builds). Check the current Flutter documentation for the options in your version, but the direction is clear: Flutter web is a canvas application.
This design is deliberate. Flutter prioritises visual fidelity, consistent behaviour across browsers and smooth animation. The same trade-off is why Flutter's own documentation says plainly that the framework is aimed at app-like experiences rather than text-heavy, document-style sites.
Flutter web SEO: what search engines and AI crawlers see
Google describes a three-phase pipeline for JavaScript sites: it crawls the URL, renders the page, then indexes what it finds, as set out in its JavaScript SEO basics. Google can run a Flutter web app, but running the app is not the same as finding text. If the words are painted on a canvas, there is little for the indexer to read.
Flutter does have a way to expose structure. Its accessibility layer translates the widget tree into a semantic HTML structure that screen readers can use. According to the Flutter accessibility documentation, this layer is off by default on the web. It switches on when a user activates a hidden "Enable accessibility" button, or when the app turns it on in code. It exists for assistive technology, not as an SEO feature, so do not build a ranking strategy on it. The Flutter FAQ also says the team plans to investigate search indexability for Flutter web, so check the current documentation before you commit to an architecture, and re-test your own pages in Search Console after each major Flutter upgrade.
AI crawlers raise the stakes. Many of them read only the HTML the server returns and do not run JavaScript, though this varies by bot and changes over time, so check each provider's documentation. For those crawlers, a canvas app is close to a blank page.
| Setup | What a crawler reads | Good for |
|---|---|---|
| Plain HTML page | Full text, headings, links | Content that must rank |
| Flutter web app only | A script and little text, unless semantics are enabled | Apps behind a login |
| Flutter app plus HTML pages | Full text from the HTML, app for the experience | Sites that need both |
When Flutter web is a good choice
Flutter web earns its place when the product is an application and search traffic is not how people find it.
- Dashboards and admin tools. Internal systems, reporting screens and back-office tools behind a login do not need to be indexed.
- Progressive web apps and single-page apps. The Flutter team lists these as the best fit.
- Extending an existing Flutter mobile app to the web. Sharing code between mobile and web can be a real saving when the web version is a companion to the app.
- Interactive experiences embedded in a normal site. Flutter's documentation notes that it can be embedded into a site to power an interactive section while the surrounding page stays HTML.
- Prototypes and demos where visual quality matters more than discoverability.
If you are weighing the framework itself, our comparison of Flutter vs React Native covers the mobile side of the decision.
When Flutter web is the wrong choice
Choose something else when organic search is a primary acquisition channel.
- Marketing and company websites that need to rank for services.
- Blogs, guides and documentation, where the product is the text.
- E-commerce catalogues where each product page should be found in search.
- Landing pages for campaigns, where load speed and clean markup affect both ranking and cost per click.
For these, server-rendered or statically generated HTML (using a framework such as Next.js or Astro, or hand-written HTML) is the safer base. Flutter's own documentation recommends HTML for static, document-like content and mentions Jaspr, a community Dart package for DOM-based sites, as an option for teams that want to stay in Dart. Our custom website development work starts from this question: what must be found, and what must be experienced?
The pattern this website uses: static HTML for crawlers, Flutter for the experience
This website is itself a Flutter web app. It renders every page in one of six visual styles that visitors choose, which is the kind of interactive, design-heavy product Flutter does well. It is also a business website that wants to be found, so the two jobs are separated.
- Decide which URLs must rank. For this site: services, guides, work, about and contact.
- Generate those pages as plain HTML from the same content source as the app. A small build script writes the static pages and the data the Flutter app reads, so the two can never drift apart.
- Put the search essentials in the HTML. Each page has its own title, description, canonical URL and structured data.
- Link the two layers. Inside the app, links to pages that exist as static HTML send the visitor to that HTML page.
- Add a crawlable summary of the home page. Because the home page is app-driven, a visually hidden HTML version of its key content is included. It must match what visitors see, otherwise it risks looking like cloaking.
- Publish a sitemap and monitor indexing. Use Search Console to check that the pages you care about are indexed and that titles and descriptions look right.
The cost of this pattern is a second rendering path to maintain. The benefit is that search engines, AI crawlers and people with JavaScript disabled all receive real content.
Performance and Core Web Vitals on Flutter web
Search engines also care about experience. Google's Core Web Vitals set "good" thresholds at the 75th percentile of real visits: Largest Contentful Paint within 2.5 seconds, Interaction to Next Paint within 200 milliseconds, and Cumulative Layout Shift of 0.1 or less, as documented on web.dev.
A Flutter web app has to download its engine before it can draw anything, so the first load is heavier than a plain HTML page. Practical steps include showing a lightweight loading state in the HTML so the first paint is immediate, splitting rarely used screens into deferred libraries so they download on demand, keeping images and fonts small, and testing on mid-range phones rather than only on a fast laptop. Measure with field data where you can, since lab tests alone can hide real-world slowness. Our guide to Core Web Vitals explains the metrics and the fixes that matter most.
Accessibility belongs in the same conversation
Canvas rendering makes accessibility a deliberate task. Flutter's semantics layer is how screen readers learn what is on the screen, so label interactive widgets, give images descriptions, keep a logical focus order and test with a real screen reader. This is good practice in its own right and, where it produces a semantic DOM, a useful side effect for machines that read structure. Treat it as an accessibility requirement first, and as a minor SEO bonus at most.
A checklist before you ship a Flutter website
- List every URL that needs to rank, and confirm each has crawlable HTML.
- Give each page a unique title, description and canonical URL in the HTML.
- Generate static pages and app data from one content source.
- Keep any hidden crawler summary identical to the visible content.
- Add structured data (Organization, Article, FAQ where the content is visible) to the HTML pages.
- Submit an XML sitemap and check indexing in Search Console.
- Test Largest Contentful Paint and Interaction to Next Paint on real mid-range phones.
- Test with a screen reader and with JavaScript disabled.
If you are planning a product that needs both an app and a findable website, talk to us about Flutter app development and we can scope the split before any code is written.