Flutter Web Deployment: A Practical Guide to Hosting Alternatives

So, you’ve built a slick Flutter web app—maybe a dashboard, an interactive portfolio, or a client-facing tool. You run flutter build web, and a neat /build/web folder pops out, full of static assets. Now comes the classic developer hurdle: Where do I put this so the world can see it?

The landscape for simple, free static hosting has shifted over the years. Some beloved services have vanished, leaving developers scrambling for a new home for their projects. The good news? Today, we have a fantastic array of robust, developer-friendly platforms that are perfect for hosting Flutter web builds. Let’s walk through four of the best: Netlify, Firebase Hosting, Vercel, and Cloudflare Pages.

The Core Principle: Static Hosting

Flutter web apps (using the default --web-renderer html or canvaskit) are essentially static sites after build. They are bundles of HTML, JavaScript, CSS, and assets. This means any service that can host static files is a candidate. The key is finding one that integrates smoothly with your workflow, offers good performance, and fits your budget (often “free” is the goal).

Here’s a quick, universal first step. Ensure your build is configured correctly. A common mistake is not setting a base href for routing, which can break your app on hosting services that serve from a subdirectory.

Update your flutter build web command:

flutter build web --base-href / --web-renderer canvaskit

Or, configure it permanently in your web/index.html file. Find the <base href="/"> tag and ensure it’s set correctly. For many hosting providers, a single forward slash is what you need.

1. Netlify: Drag-and-Drop Simplicity

Netlify is a joy to use. Its free tier is generous and perfect for prototypes, personal projects, and even smaller production apps.

How to deploy:

1. Go to Netlify and sign up.
2. From the dashboard, click “Add new site” -> “Deploy manually”.
3. Simply drag and drop your entire /build/web folder into the browser window.
4. Netlify uploads it, gives you a random URL (like quirky-turtle-123.netlify.app), and your site is live in seconds.

For a more automated CI/CD approach, connect a GitHub repository. Netlify will watch your repo and automatically deploy whenever you push to your main branch. You just need to tell it the build command (flutter build web) and the publish directory (build/web).

Netlify Pro Tip: If your Flutter app uses client-side routing (like go_router), you might need a _redirects file to handle deep links. Create a file named _redirects inside your build/web folder before deploying, with the content:

/*    /index.html   200

This tells Netlify to serve index.html for all routes, allowing your Flutter app to handle the routing.

2. Firebase Hosting: The Flutter Family Member

If you’re already using Firebase for backend services (like Auth, Firestore), Hosting is a natural fit. It’s tightly integrated with the Firebase CLI and Google’s ecosystem.

Steps: First, install the Firebase CLI and initialize your project.

# Install CLI (if you haven't)
npm install -g firebase-tools

# Login
firebase login

# Initialize hosting in your Flutter project root
firebase init hosting

During init, choose your Firebase project and set the public directory to build/web. The CLI will create a firebase.json configuration file.

Now, every time you build your web app, you can deploy with one command:

flutter build web
firebase deploy --only hosting

Your app will be live at a web.app subdomain (e.g., your-project.web.app) and a firebaseapp.com domain. The free tier includes modest bandwidth, which is great for development and testing.

3. Vercel: Performance & Framework Smartness

Vercel, known for its excellent Next.js support, is also a superb static host. It offers brilliant edge network performance and a very slick interface.

Deployment is similar to Netlify:

1. Sign up at Vercel.
2. Import your GitHub/GitLab/Bitbucket repository.
3. In the configuration screen, set the Framework Preset to “Other”. Since Vercel doesn’t have a Flutter preset, we treat it as a static site.
4. Set the Output Directory to build/web.
5. Deploy. Vercel will automatically run flutter build web if you set the Build Command, or you can configure it to use the pre-built directory from your repo.

Vercel’s real strength is its automatic preview deployments for every pull request, giving you a URL to test each feature branch—a fantastic workflow for teams.

4. Cloudflare Pages: The Bandwidth Champion

For apps that might scale or serve larger assets, Cloudflare Pages is a standout. Its free tier includes unlimited bandwidth and integrates seamlessly with Cloudflare’s global CDN.

Process:

1. Go to Cloudflare Pages.
2. Connect your Git repository.
3. In the build settings:
   • Build command: flutter build web
   • Build output directory: build/web
4. Click “Save and Deploy”.

Cloudflare Pages will build and deploy your app, providing you with a pages.dev subdomain. The unlimited requests on the free plan make it ideal for apps expecting variable or high traffic.

Final Considerations

• Custom Domains: All four services allow you to connect a custom domain (like myapp.com) on their free tiers, usually with SSL provided automatically.
• Build Time: Remember, these platforms will run your flutter build web command in their virtual environment. Ensure your pubspec.yaml doesn’t rely on local system dependencies that won’t be available there.
• Routing: As mentioned, static hosting requires all paths to fall back to index.html. Double-check this configuration for each service if your app has deep linking.

Choosing Your Host: It often comes down to your existing ecosystem.

• If you use GitHub heavily and want simplicity, choose Netlify or Vercel.
• If your app uses Firebase, stick with Firebase Hosting.
• If you need massive bandwidth for free and global performance, Cloudflare Pages is your answer.

The process is straightforward: build your app, point the hosting service to the output folder, and deploy. With these tools, finding a reliable, free home for your Flutter web app is no longer a struggle—it’s just a few clicks away.