Flutter web apps support two ways of configuring URL-based navigation on the web:

Hash (default)

Paths are read and written to thehash fragment.

For example,flutterexample.dev/#/path/to/screen.

Path

Paths are read and written without a hash. For example,

flutterexample.dev/path/to/screen.

To configure Flutter to use the path instead, use theusePathUrlStrategy function provided by theflutter_web_plugins library, which is part of the Flutter SDK.

You can't directly addflutter_web_plugins usingpub add. Include it as a FlutterSDK dependency in yourpubspec.yaml file:

dependencies:flutter:sdk:flutterflutter_web_plugins:sdk:flutter

Then call theusePathUrlStrategy function beforerunApp:

import'package:flutter_web_plugins/url_strategy.dart';​voidmain(){usePathUrlStrategy();runApp(ExampleApp());}

PathUrlStrategy uses theHistory API, which requires additional configuration for web servers.

To configure your web server to support PathUrlStrategy, check your web server's documentation to rewrite requests toindex.html. Check your web server's documentation for details on how to configure single-page apps.

If you are using Firebase Hosting, choose the "Configure as a single-page app" option when initializing your project. For more information see Firebase'sConfigure rewrites documentation.

The local dev server created by runningflutter run -d chrome is configured to handle any path gracefully and fallback to your app'sindex.html file.

Update the<base href="/"> tag inweb/index.html to the path where your app is hosted. For example, to host your Flutter app atmy_app.dev/flutter_app, change this tag to<base href="/flutter_app/">.

Relativebase href tags are supported for release builds but they must take into account the full URL where the page was served from. This means a relativebase href for a request to/flutter_app/,/flutter_app/nested/route, and/flutter_app/nested/route/ will be different (for example".","..", and"../.." respectively).