Remove hash symbol ' # ' from Flutter web navigation

user_2625316 0
Viewed 2315

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.

flutter-web flutter
2 Answers

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()); }

user_59967460

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.

user_2104170
Related