How to remove hash (#) from URL in Flutter web

FlutterDartFlutter Web

Flutter Problem Overview

The default URL of a Flutter web project defines a URL containing a hashtag (#), as follows:

http://localhost:41521/#/peaple/...

I would like to remove this '#', looking like this:

http://localhost:41521/peaple/

How can I solve this problem?

Flutter Solutions

Solution 1 - Flutter

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 (full disclosure: I am the author)

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

Calling setPathUrlStrategy is all you need to do 

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

Notes

You need to make sure that you include <base href="/"> inside the <head> section of your web/index.html when using the path URL strategy.
This is added by default when creating a new Flutter app.

Furthermore, when deploying your production app, you need to make sure that every path points to your index.html. If you use tools like Firebase hosting, this is done automatically for you when configuring your app as a single page app.
Otherwise, you want to look up how to rewrite all paths to your index.html for the hosting you are using.

Essentially, you want to have a single page app, where the HTTP server serves the index.html for all paths.

The package implementation is based on the manual solution using flutter_web_plugins. The benefits of using the package are the following:

  • Only need to call a single function.
  • No need to use conditional imports (the package does it for you).
  • You will not get any missing implementation issues on stable (as the web feature is still on beta).

Solution 2 - Flutter

The following answer is copied from Mouad Debbar's explanation on GitHub (see issue comment).

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 it manually. Add the flutter_web_plugins dependency in pubspec.yaml if it doesn't already exist:

dependencies:
  flutter_web_plugins:
    sdk: flutter

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

void configureApp() {
  // No-op.
}

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

import 'package:flutter_web_plugins/flutter_web_plugins.dart';

void configureApp() {
  setUrlStrategy(PathUrlStrategy());
}

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() {
  configureApp();
  runApp(MyApp());
}

Solution 3 - Flutter

Only for Github pages hosting

This also applies to apps that aren't served from domain.com/ directly but from some path domain.com/path/.

You need to add your repo name to base href otherwise your website won't work.

<base href="/REPO_NAME/">

Solution 4 - Flutter

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

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

Solution 5 - Flutter

add this in pubspec.yaml

dependencies:
  flutter_web_plugins:
    sdk: flutter

inside the main.dart file add the cofigureApp in to root of the app and also add this import

import 'package:flutter_web_plugins/flutter_web_plugins.dart';

void configureApp() {
  setUrlStrategy(PathUrlStrategy());
}

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  configureApp();
  runApp(MyApp());
}

restart the web app

out will be like this

http://localhost:52299/login_page

Solution 6 - Flutter

I found most of the answers above to be a bit confusing. What ended up working for my firebase-hosted website was following this short 4-minute YouTube tutorial by Johannes Milke.

The tutorial outlines a number of options for solving the "#" problem, basically explaining some of the answers above a bit better. My final solution was to

  1. Add url_strategy dependency as outlined in many of the answers above.
  2. Adding base href="/"> inside the section of my index.html file
  3. Making sure that all paths point to index.html by adding "rewrites": [ { "source": "**", "destination": "/index.html" } ] in my firebase.json.
Categories
Recommended Flutter Solutions
Recommended Dart Solutions
Recommended Flutter Web Solutions

Previous Solution:

Tailwindcss: fixed/sticky footer on the bottom

CssDjangoTailwind Css

Next Solution:

VS Code highlighted all my wordpress function name

WordpressVisual Studio-CodeIntelephense

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionEdeson BizerrilView Question on Stackoverflow
Solution 1 - FluttercreativecreatorormaybenotView Answer on Stackoverflow
Solution 2 - FlutterTarek AlabdView Answer on Stackoverflow
Solution 3 - FlutterFran MaricView Answer on Stackoverflow
Solution 4 - FlutterJhourlad EstrellaView Answer on Stackoverflow
Solution 5 - FlutterJinto JosephView Answer on Stackoverflow
Solution 6 - FlutterMRRView Answer on Stackoverflow