Configuración de la estrategia de URL en la web

Las aplicaciones web de Flutter admiten dos formas de configurar la navegación basada en URL en la web:

Hash (predeterminado)

Las rutas se leen y escriben en el fragmento de hash.

Por ejemplo, flutterexample.dev/#/path/to/screen.

Ruta (Path)

Las rutas se leen y escriben sin un hash. Por ejemplo,

flutterexample.dev/path/to/screen.

Para configurar Flutter para que use la ruta en su lugar, utiliza la función usePathUrlStrategy proporcionada por la librería flutter_web_plugins, que forma parte del SDK de Flutter.

No puedes agregar directamente flutter_web_plugins usando pub add. Inclúyela como una dependencia del SDK de Flutter en tu archivo pubspec.yaml:

dependencies:
  flutter:
    sdk: flutter
  flutter_web_plugins:
    sdk: flutter

Luego llama a la función usePathUrlStrategy antes de runApp:

import 'package:flutter_web_plugins/url_strategy.dart';
​
void main() {
  usePathUrlStrategy();
  runApp(ExampleApp());
}

PathUrlStrategy utiliza la History API, lo que requiere una configuración adicional para los servidores web.

Para configurar tu servidor web para admitir PathUrlStrategy, consulta la documentación de tu servidor web para reescribir las solicitudes a index.html. Consulta la documentación de tu servidor web para obtener detalles sobre cómo configurar aplicaciones de una sola página (single-page apps).

Si estás utilizando Firebase Hosting, elige la opción "Configurar como una aplicación de una sola página" al inicializar tu proyecto. Para obtener más información, consulta la documentación de Firebase sobre Configurar reescrituras.

El servidor de desarrollo local creado al ejecutar flutter run -d chrome está configurado para manejar cualquier ruta adecuadamente y recurrir al archivo index.html de tu aplicación.

Actualiza la etiqueta <base href="/"> en web/index.html a la ruta donde está alojada tu aplicación. Por ejemplo, para alojar tu aplicación Flutter en my_app.dev/flutter_app, cambia esta etiqueta a <base href="/flutter_app/">.

Las etiquetas base href relativas son compatibles para compilaciones de producción (release builds), pero deben tener en cuenta la URL completa desde donde se sirvió la página. Esto significa que una base href relativa para una solicitud a /flutter_app/, /flutter_app/nested/route, y /flutter_app/nested/route/ será diferente (por ejemplo ".", "..", y "../.." respectivamente).