Skip to content

Expert · Publishing to the stores and the web · topic 46 of 50 · 25 min

Flutter on the web and desktop

Explanation

flutter build web produces static files in build/web that any static host can serve, such as Firebase Hosting or GitHub Pages; set --base-href when the app is not at the root path. Flutter can also compile to WebAssembly with flutter build web --wasm for better performance in supporting browsers. Flutter web suits app-like experiences (dashboards, tools, internal apps) rather than SEO-heavy content sites. Desktop builds target Windows, macOS and Linux.

Flutter on the web

The same Flutter code can run in a browser. Flutter renders the UI itself inside the page, so the app looks the same as on mobile. This is great for app-like products: admin dashboards, booking tools, internal company apps, a web version of your mobile app for desktop users.

bash
flutter run -d chrome          # develop in Chrome with hot reload
flutter build web              # release build into build/web/
flutter build web --wasm       # compile to WebAssembly (where supported)
flutter build web --base-href /shop/   # when hosted at example.com/shop/
The build output is plain static files: index.html, JavaScript or Wasm, assets.

WebAssembly builds

WebAssembly (Wasm) is a fast, compact code format browsers can run. Flutter can compile Dart to Wasm, which can make apps start and run faster, especially for heavy UIs. It needs a browser with support for the required Wasm features (modern Chromium-based browsers; check the Flutter docs for current browser and package support), and Flutter falls back to JavaScript where Wasm is not supported. Some packages that use dart:html or JavaScript interop the old way are not Wasm-compatible yet.

Hosting

HostNotes
Firebase Hostingfirebase init hosting, set the public folder to build/web, then firebase deploy; free tier, HTTPS and CDN
GitHub PagesFree for public repos; usually needs --base-href /repo-name/
Any static host or CDNUpload the contents of build/web

Single-page apps need the host to send index.html for unknown paths, so deep links like /product/42 work when the page is refreshed. Firebase Hosting supports this with a rewrite rule; check your host's settings.

When Flutter web is (and is not) a good fit

  • Good: logged-in apps, dashboards, tools, forms-heavy business apps, kiosks, a companion to your mobile app.
  • Less suitable: public content sites that depend on search engines (blogs, news, marketing pages). Search engines index regular HTML better, and the first load of a Flutter app is larger than a simple HTML page.
  • Consider load size: the first visit downloads the Flutter engine; show a light loading screen and keep assets small.

Desktop

Flutter also builds native desktop apps for Windows, macOS and Linux (flutter build windows, macos, linux). Each needs that platform's toolchain: Visual Studio with the C++ workload for Windows, Xcode for macOS. Desktop apps should adapt to mouse, keyboard and resizable windows (module 10): hover effects, keyboard shortcuts and wider layouts.

Think of it like this: Flutter web is like a food truck version of your restaurant: the same kitchen and recipes (code) served in a new place. It is perfect for regulars who want your food (app users), but it will not replace a big signboard on the highway (an SEO-optimised website) for attracting new passers-by.

Common mistakes

  • A blank page on GitHub Pages because --base-href was not set.
  • Deep links returning 404 on refresh because the host does not rewrite to index.html.
  • Building a public marketing website in Flutter and expecting strong search ranking.
  • Using packages that do not support the web (dart:io file access, some native plugins) without checking the platform badges on pub.dev.

Need help?

Stuck on a word or an idea? Search this course, or every course, and jump straight to the explanation or a worked question.

Try:

Watch the lesson

Flutter on the web and desktop · 1/6

Flutter web

The same Flutter code runs in the browser. It suits app like products: dashboards, tools and internal apps.

Prefer a video by a teacher? Find free videos on “flutter web build deploy firebase hosting wasm github pages base href” on YouTube ↗

In real life: A web dashboard for a delivery app

A cloud kitchen already has a Flutter mobile app for customers. The team builds a Flutter web dashboard for kitchen staff to see incoming orders on large screens, sharing models, API code and state management with the mobile app. They deploy it to Firebase Hosting with a rewrite to index.html, and try the --wasm build on the Chromium-based browsers the kitchen uses.

Practice (0/3 done)

Task 1 · Question

Where does flutter build web put its output?

Task 2 · Question

Which project is the weakest fit for Flutter web?

Task 3 · Practice

Build your app for the web, deploy it to Firebase Hosting (or GitHub Pages with the right --base-href), make sure refreshing a deep link works, and try a --wasm build in Chrome. Note the first-load size and one change you could make to reduce it.

Quick quiz

Question 1

1.What does --base-href do?

Question 2

2.What does flutter build web --wasm produce?

Question 3

3.Why might /product/42 show a 404 after refreshing a deployed Flutter web app?

Question 4

4.What do you need to build a Flutter Windows desktop app?

Read more (free)

Open a question to see the answer and why. The first ones are this topic's own quiz, so try the quiz above before you peek.

What does --base-href do?

Answer: Sets the path the web app is served from

Needed when hosting under a sub-path.

What does flutter build web --wasm produce?

Answer: A WebAssembly build of the web app

Faster in supporting browsers.

Why might /product/42 show a 404 after refreshing a deployed Flutter web app?

Answer: The host is not rewriting unknown paths to index.html

Configure a single-page-app rewrite.

What do you need to build a Flutter Windows desktop app?

Answer: Visual Studio with the C++ desktop workload

flutter doctor lists it.

Which crate-type is needed to build a Wasm library for JavaScript?Related

Answer: cdylib

cdylib produces a dynamic library that wasm-bindgen can wrap.

From Rust and WebAssembly

How does Flutter render its UI?Related

Answer: It draws everything itself with its own engine

That is why it looks consistent everywhere.

From Flutter and Dart: the big picture

Does the Flutter SDK include Dart?Related

Answer: Yes, Dart is bundled

The Flutter SDK ships with the Dart SDK.

From Installing Flutter

Why do many startups and agencies like Flutter?Related

Answer: One team can ship Android, iOS and web from one codebase

Saves time and cost.

From Flutter jobs and freelancing in India

Pass the quiz (60% or more) or mark this topic as done when you are ready.

Your progress is saved on this device only.

Next: Flutter jobs and freelancing in India →

Next steps

  1. This is the last topic of “Publishing to the stores and the web”. The module exam comes next.
  2. Module 11 exam: Publishing to the stores and the web · 12 questions · 25 min, without help. 4 topics of this module still to finish first.
  3. Then the next module, Flutter careers and interviews. 50 topics left in the course before the final exam.

← Previous: Publishing on the Apple App Store