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.
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.
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
}
}
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.
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