Configuring the URL strategy on the web

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

Hash (default): Paths are read and written to the hash fragment. For example, Path: Paths are read and written without a hash. For example,

These are set using the setUrlStrategy API with either a HashUrlStrategy or PathUrlStrategy.

Configuring the URL strategy

The setUrlStrategy API can only be called on the web. The following instructions show how to use a conditional import to call this function on the web, but not on other platforms.

  1. Include the flutter_web_plugins package and call the setUrlStrategy function before your app runs:
    sdk: flutter
  1. Create a lib/configure_nonweb.dart file with the following:
    void configureApp() {
      // No-op.
  2. Create a lib/configure_web.dart file with the following:
import 'package:flutter_web_plugins/flutter_web_plugins.dart';

void configureApp() {
  1. Open lib/main.dart and use a conditional import to import configure_web.dart when the html package is available, and 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() {

Hosting a Flutter app at a non-root location

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