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?
In a URL, a hash mark, number sign, or pound sign ( # ) points a browser to a specific spot in a page or website. It is used to separate the URI of an object from a fragment identifier. When you use a URL with a # , it doesn't always go to the correct part of the page or website.
Window location. The replace() method replaces the current document with a new one.
Window location.search The search property returns the querystring part of a URL, including the question mark (?). The search property can also be used to set the querystring.
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)
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
.
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:
stable
(as the web feature is still on beta
).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()); }
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With