es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Flutter web no puede visitar la URL.

19 Jul, 2023 Programación

En Flutter web, ¿cómo puedo abrir una página específica a través de una dirección completa?

El escenario es el siguiente:
1. Abrir una ruta de página de aula como
await Navigator.pushNamed(context, "classroom/detail/$id", arguments: {"data": someData});
2. Se abrirá la página de la aula y la barra de direcciones contendrá una URL como http://localhost/myschoolweb/classroom/detail/1```
3. PresionoF5“` para refrescar la página -> ERROR 404
4. Abro una nueva pestaña y visito la dirección mencionada -> ERROR 404

Este es mi código de onGenerateRoute:

onGenerateRoute: (RouteSettings settings) {
  List<string> routes = settings.name?.split("/") ?? [];
  final routeName = routes.isNotEmpty ? routes.first : null;
  final routeSub1 = routes.length > 1 ? routes[1] : null;
  final routeSub2 = routes.length > 2 ? routes[2] : null;

  final args = {
    ...(settings.arguments as Map<string, dynamic="">? ?? {}),
    "sub1": routeSub1,
    "sub2": routeSub2,
  };

  Widget page = const SplashPage();
  switch (routeName) {
    case ROUTE_CLASS: page = ClassPage(args); break;
    // otras rutas ...
  }

  Future.microtask(() => FocusScope.of(context).requestFocus(FocusNode()));
  return MaterialPageRoute(
    settings: settings,
    builder: (context) {
      // otros scripts ...
      return page;
    }
  );
},

Sospecho que se traducirá como classroom/detail/1/index.html, lo cual, por supuesto, no existe en el servidor.

ps:
Utilizo esta biblioteca para simplificar la URL web: https://pub.dev/packages/url_strategy</string,>

Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para abrir una página específica a través de una dirección completa en Flutter Web, puedes utilizar el paquete url_strategy para simplificar la URL web.

    Aquí están los pasos:
    1. Instala el paquete url_strategy en tu proyecto de Flutter web.
    2. Importa el paquete en tu archivo main.dart y llama a setPathUrlStrategy(). Esto convertirá tu URL al formato de la API de historial HTML5.
    3. En tu método onGenerateRoute, modifica la PageRoute para incluir la URL completa utilizando settings.name en lugar del nombre de la ruta.
    4. Actualiza tu servidor para manejar el nuevo formato de URL.

    Aquí tienes un ejemplo de cómo modificar tu método onGenerateRoute:

    onGenerateRoute: (RouteSettings settings) {
  // Obtén el nombre completo de la ruta
  String routeName = settings.name ?? '';

  // Elimina la barra diagonal inicial
  if (routeName.startsWith('/')) {
    routeName = routeName.substring(1);
  }

  // Construye el widget de la página
  Widget page;
  if (routeName.startsWith('classroom/detail/')) {
    String id = routeName.substring('classroom/detail/'.length);
    page = ClassroomDetailPage(id);
  } else {
    page = Error404Page();
  }

  // Construye y devuelve la ruta
  return MaterialPageRoute(
    settings: settings,
    builder: (context) => page,
  );
},

    Con estos cambios, ahora puedes abrir una página específica a través de una dirección completa como `http://localhost/myschoolweb/classroom/detail/1` y actualizar la página sin obtener un error 404.

Comments are closed.