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 onbeta).