URL strategy

Remove the URL '#' with setUrlStrategy.

URL strategy

setUrlStrategy controls the # sign in the web URL. The default HashUrlStrategy puts a # in the URL; PathUrlStrategy uses a clean path.

import 'package:flutter_web_plugins/flutter_web_plugins.dart';

void main() {
  setUrlStrategy(PathUrlStrategy());
  runApp(MyApp());
}

Hash vs Path

A hash URL (example.com/#/page) requires no server configuration. A path URL (example.com/page) looks clean but requires server-side routing; otherwise a refresh returns 404.

Exercise Strategy variable

In main, assign 'PathUrlStrategy' to strategy, assign false to hasHash, and print strategy.

Show example solution

void main() {
  const strategy = 'PathUrlStrategy';
  const hasHash = false;
  print(strategy);
}

Test yourself

What does PathUrlStrategy do?
- Resets the URL
- Removes the '#' from the URL
- Reloads the page
- Adds '#' to the URL
Show answer

Removes the '#' from the URL — PathUrlStrategy uses a clean path and removes the '#' from the URL; HashUrlStrategy adds it, and resetting or reloading is not the strategy's job.

Use PathUrlStrategy

setUrlStrategy(____());

Show answer

setUrlStrategy(PathUrlStrategy());

URL strategy matches

setUrlStrategy

URL strategy setting
path

Clean URL path
URL

Web address
PathUrlStrategy

Hash-less strategy

Next lesson: Web vs mobile

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies