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.
setPathUrlStrategy();
runApp(MyApp());
}
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 = settings.name.split('/').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:
dependencies:
flutter_web_plugins:
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() {
configureApp();
runApp(MyApp());
}
Conclusion:
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!!
FlutterAgency.com is our portal Platform dedicated to Flutter Technology and Flutter Developers. The portal is full of cool resources from Flutter like Flutter Widget Guide, Flutter Projects, Code libs and etc.
FlutterAgency.com 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.
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.
Somyarajsinh jadeja
Thanks for the tip!! Its useful