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.
  setPathUrlStrategy();
  runApp(MyApp());
}

That's it