Flutter Tips & Tricks #2 - Remove The Hashtag From URL


As you know, Flutter web is a single-page app (SPA), and like most SPA apps, they add a hashtag in the URL, which is fine in the majority of SPA frameworks like React, Vue, or Angular as they support server-side rendering or have options for this. Still, in Flutter web currently, as of version 2.2, there is no support for this.

The issue that I ran into was using Firebase hosting and Firebase rewrites. Now, this might not be a big deal if you're hosting your app on a different server or using a different backend.

But in my case, I need to use Firebase rewrites to support open graph meta tags (tutorial blog post about this coming out soon) and as I'm using URL fragments in the URL (#). Everything after the # in the URL is never sent to the server and cannot be used as the basis of Firebase Hosting rewrites.

There is an easy fix using the url_strategy Flutter package;

of course, I'm sure there are other ways to remove the hashtag, but I wanted something simple, easy, and fast.

Here is a quick setup guide you can also find this on the package readme

flutter pub add url_strategy
import 'package:url_strategy/url_strategy.dart';

void main() {
  // Here we set the URL strategy for our web app.
  // It is safe to call this function when running on mobile or desktop as well.

That's it

Let’s Work Together

If you have an app idea in mind or you need some advice about development, product UX/UI, contact me. Currently my time books quickly, so the sooner you write, the better it is for both of us.

Reply time: within 1-2 working days