Configuring the URL strategy on the web

Contents

Configuring the URL strategy
Hosting a Flutter app at a non-root location

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, flutterexample.dev/#/path/to/screen. Path: Paths are read and written without a hash. For example, flutterexample.dev/path/to/screen.

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.

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

dependencies:
  flutter_web_plugins:
    sdk: flutter

Create a lib/configure_nonweb.dart file with the following:
```
void configureApp() {
  // No-op.
}
```
Create a lib/configure_web.dart file with the following:

import 'package:flutter_web_plugins/flutter_web_plugins.dart';

void configureApp() {
  setUrlStrategy(PathUrlStrategy());
}

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() {
  configureApp();
  runApp(MyApp());
}

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 myapp.dev/flutter_app, change this tag to <base href="/flutter_app">.