US Office

1176 Shadeville Rd, Crawfordville Florida 32327, USA

 +1 (850) 780-1313

India Office

Office No. 501, Shree Ugati Corporate Park, Gandhinagar - 382421, Gujarat, India

[email protected]

How to Remove Hash From URL In Flutter Web??

How to Remove Hash From URL In Flutter Web

How to Remove Hash From URL In Flutter Web??

The default URL of a Flutter web project defines a URL containing a hashtag So in today’s article we will go through how to Remove Hash From URL in flutter web.

How to Remove Hash From URL In Flutter Web??

You can now use a simple package and a single line of code to remove the leading hash from your Flutter web app: url_strategy

Using url_strategy

You simply add the dependency as described here and then add the following function call to your main function:

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.

Calling setPathUrlStrategy is all you need to do

The package also ensures that running the code will not crash on mobile. Additionally, this will also run on stable if you build your mobile app on the stable and only web on beta.

If your only concern is for routing, you can do something like this:

onGenerateRoute: (settings) {
    List segments ='/').where((x) => ! x.isEmpty).toList();
    String page = segments.length > 0 ? segments[0] : '';

Here are the steps to use it once it’s available:

Add <base href=”/”> inside the <head> section of your web/index.html file.

This will be added automatically for new projects created by flutter create. But for existing apps, the developer needs to add them manually.

Add the flutter_web_plugins dependency in pubspec.yaml if it doesn’t already exist:

    sdk: flutter

Add a lib/configure_nonweb.dart with the following content:

void configureApp() {
  // No-op.

In lib/main.dart, do the following:

import 'package:flutter/material.dart';
import 'configure_nonweb.dart' if (dart.library.html) 'configure_web.dart';

void main() {


In this article, we have been through how to remove hash from URL in flutter web ??

Keep Learning !!! Keep Fluttering !!!

Do let us know in the comments if you are still confused in flutter!! is our portal Platform dedicated to Flutter Technology and Flutter Developers. The portal is full of cool resources from Flutter like Flutter Widget GuideFlutter ProjectsCode libs and etc. is one of the most popular online portals dedicated to Flutter Technology and daily thousands of unique visitors come to this portal to enhance their knowledge of Flutter.

  • August 7, 2021
    Da-hye Kim

    It worked great in terms of removing hash,
    though I later spent lots of time figuring out why query parameters keep disappearing after a second or so,
    to figure out that this PathUrlStrategy was removing those query parameters as well… :'(

    I think it would be great to be able to keep these query parameters that come after the route name.

    • August 9, 2021
      Somyarajsinh jadeja

      Thanks for the tip!! Its useful

Post a Comment