How to configure URL strategy in Flutter web

In web development, URL strategy refers to the structure and format of the URLs of a web application and how they behave when a user navigates through the app.

Types of URL strategy

There are two main types of URL strategies, as follows:

  • Hash-based URLs: Web app URLs are appended with a hash symbol followed by a unique identifier for the current view. For example, a login page URL might look like this: http://example.com/#/login. This type of URL doesn't cause a full page refresh. Instead, the browser updates only the changed content of the page, making the app feel faster and more responsive.

  • Path-based URLs: Web app URLs look more like traditional URLs and are easier to read and understand. For example, a login page URL might look like this: http://example.com/login. This type of URL causes a full page refresh when the user navigates through the app, resulting in a slower user experience, especially if the app has a lot of content.

By default, Flutter web uses a hash-based URL strategy and can be easily configured depending on the needs and preferences.

Code example

Here's an example of configuring the URL strategy from hash-based to path-based in Flutter.

import 'package:flutter/material.dart';
import 'main.dart';

class Page2 extends StatefulWidget {
  @override
  State<Page2> createState() => _Page2State();
}

class _Page2State extends State<Page2> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Page 2"),
      ), //AppBar
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Icon(
              Icons.check_box,
              color: Color(0xff0aad5b),
              size: 50,
            ), //icon
            Text(
              "Succeeded",
              style: TextStyle(fontSize: 20),
            )
          ],
        ), //Column
      ), //Center
    ); //Scaffold
  }
}
Configuring URL strategy in Flutter web

When we run the code and click the link provided, it opens the application in a new tab. Here we can observe that the complete URL of the app does not contain the hash symbol. We can comment on the highlighted lines in the code to see the effect on the output.

Explanation

In the main.dart file, we do the following:

  • Line 3: We import the flutter_web_plugins package to gain access to web-specific plugins and functionalities.

  • Line 6: The setUrlStrategy() function allows us to set the URL strategy for our web application. The URL strategy determines how web app URLs are displayed and managed in the browser's address bar. When we call PathUrlStrategy(), it returns an instance of the PathUrlStrategy class that we pass as an argument to setUrlStrategy() to set up a path-based URL strategy for our app.

Free Resources

Copyright ©2026 Educative, Inc. All rights reserved