Remove hash symbol ' # ' from Flutter web navigation

Question

I want to create one simple web application with Flutter web but after I create some simple application with this document I faced with some issue on routing address it automatically add one hash '#' symbol to URL on the address bar, I want to know how I can remove this sign from URL, In fact, right now I see something like this on browser address-bar : http://[::1]:54587/#/register but I want to achieve to something like this http://[::1]:54587/register.

Answer 1

Configuring the URL strategy on the web

1. Include the flutter_web_plugins package and call the setUrlStrategy function before your app runs:

   dependencies:
   flutter_web_plugins:
   sdk: flutter

2. Create a lib/configure_nonweb.dart file with the following code:

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

3. Create a lib/configure_web.dart file with the following code:

   import 'package:flutter_web_plugins/flutter_web_plugins.dart'; void configureApp() { setUrlStrategy(PathUrlStrategy()); }

4. Open lib/main.dart and conditionally import configure_web.dart when the html package is available, or configure_nonweb.dart when it isn’t:

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

   void main() { configureApp(); runApp(MyApp()); }

Answer 2

If your only concern is for routing, you can check out my answer here: https://stackoverflow.com/a/63042805/210417

Basically it just splits the current URL into a List and then removes the empty ones caused by the hash tag.