The onWillPop method of the WillPopScope Widget is not called when pressing the back arrow in the web browser

Question

I am developing a website using Flutter. When I navigate in the order DashboardLayout -> ListEventsViewTable -> EditEventView 1, and press the back arrow in the browser 2, EditEventView Widget is removed from the Widget Tree, which is what I expect. But when I navigate in the same order, reload the page in the browser 3, and then press the back arrow 4, the EditEventView Widget is not removed as in the previous case. When I try to control when the back arrow is pressed in the browser, the onWillPop method of the WillPopScope Widget is not being called.

Structure of the Widget Tree, at different times.

My main problem is how can I make the EditEventView page to be removed from the Widget Tree whenever the view is left, no matter if it was using the arrows or directly buttons on the page. In case the answer is using WillPopScope, why doesn't it work for me?

I am using the auto_route package:

AutoRoute(
      path: RouteGlobals.dashboard,
      name: "DashBoard",
      page: DashboardLayout,
      guards: [IsAuthenticated, RoleGuard],
      children: [
        //Events
        AutoRoute(
          path: RouteGlobals.listEventsRoute,
          page: ListEventsViewTable,
          guards: [IsAuthenticated, RoleGuard],
        ),
        AutoRoute(
          path: RouteGlobals.createEventRoute,
          page: CreateEventView,
          guards: [IsAuthenticated, RoleGuard],
        ),
        AutoRoute(
          path: '${RouteGlobals.eventOpenedRoute}/:id',
          page: EventOpenedView,
          guards: [IsAuthenticated, RoleGuard],
        ),
        AutoRoute(
            name: "EditEventView",
            path: '${RouteGlobals.editEventRoute}/:id',
            page: EditEventView,
            guards: [IsAuthenticated, RoleGuard],
        ),
      ],
    ),

EditEventView:

(...)
@override
  Widget build(BuildContext context) {
    _eventProvider = Provider.of<EventProvider>(context);
    final screenSize = Provider.of<ScreenSize>(context);

    return WillPopScope(
      onWillPop: () {
        print("going back!!!!!!!!!!!!!!!!!!"); // never printed when pressing on back arrow.
        context.router.navigate(CreateEventView());
        return Future(() => true);
      },
      child: (loadingEvent || savingEvent)
          ? SafeArea(
              child: Center(
                  child: Container(
                      padding: const EdgeInsets.all(0.0),
                      width: 120.0,
                      height: 120.0,
                      child: const CircularProgressIndicator())))
          : SingleChildScrollView(
              physics: const ClampingScrollPhysics(),
              child: (...)
(...)

I have searched here, here, and here, but still no answer.

Answer 1

are you using routes?

tried this?

onWillPop:() async {
     print("returned")
     return await true;
}