Full Url is not displayed in browser Flutter web

Question

In my App I have setup a custom Navigator and dough the navigation system works, the browser doesn't show the full url, it always shows http://localhost:55865/#/ .. Can you spot what I'm doing wrong ?

I declared all routes as:

const String HomeRoute = '/home';
const String AboutRoute = '/about';
const String RetailerAccessRoute = '/retailers';
const String TermsOfServiceRoute = '/termsOfService';
const String PrivacyPolicyRoute = '/privacyPolicy';
const String PrivacySettingsRoute = '/privacySettings';
const String CommunityGuidelinesRoute = '/communityGuidelines';
const String LegalNoticeRoute = '/legalNotice';

then I have the generateRoute (called by MaterialApp's onGenerateRoute: callback) that uses a switch to return the corresponding Widget with an applied transition effect:

Route<dynamic> generateRoute(RouteSettings settings) {
//  print('generatedRoute: ${settings.name}');
  switch (settings.name) {
    case HomeRoute:
      return _getPageRoute((HomePage()));
    case AboutRoute:
      return _getPageRoute(AboutPage());
    case RetailerAccessRoute:
      return _getPageRoute(RetailerAccess());
    case TermsOfServiceRoute:
      return _getPageRoute(TermsOfService());
    case PrivacyPolicyRoute:
      return _getPageRoute(PrivacyPolicy());
    case CommunityGuidelinesRoute:
      return _getPageRoute(CommunityGuidelines());
    case LegalNoticeRoute:
      return _getPageRoute(LegalNotice());
  }
}

PageRoute _getPageRoute(Widget child) {
  return _FadeRoute(
    child: child,
  );
}

class _FadeRoute extends PageRouteBuilder {
  final Widget child;
  _FadeRoute({this.child})
      : super(
          pageBuilder: (
            BuildContext context,
            Animation<double> animation,
            Animation<double> secondaryAnimation,
          ) =>
              child,
          transitionsBuilder: (
            BuildContext context,
            Animation<double> animation,
            Animation<double> secondaryAnimation,
            Widget child,
          ) =>
              FadeTransition(
                opacity: animation,
                child: child,
          ),
        );
}

navigateTo() method does actually push the route:

class NavigationService {
  final GlobalKey<NavigatorState> navigatorKey = NavigatorKeys.webNavigatorGlobalKey;
//  final GlobalKey<NavigatorState> navigatorKey = GlobalKey<NavigatorState>();
  
Future<dynamic> navigateTo(String routeName) {
    return navigatorKey.currentState.pushNamed(routeName);
  }
}

navigateTo() is called inside the NavigationBar's buttons(NavigationBarItem) onPressed: callback:

class NavigationBarItem extends StatelessWidget {
  final String title;
  final String navigationPath;
  const NavigationBarItem({this.title, this.navigationPath});

  @override
  Widget build(BuildContext context) {
    return RaisedButton(
      color: Colors.transparent,
      elevation: 0,
      hoverColor: Colors.transparent,
      hoverElevation: 0,
      highlightColor: Colors.transparent,
      highlightElevation: 0,
      splashColor: Colors.transparent,
      child:
      Text('$title',
        style: TextStyle(
            fontSize: 12,
            color: Colors.white,
            fontWeight: FontWeight.w400),
      ),
      onPressed: () {
        locator<NavigationService>().navigateTo(navigationPath);
      },
    );
  }
}

Home route button example:

 NavigationBarItem(
                title: AppLocalizations.instance.text('Home'),
                navigationPath: HomeRoute,
              ),

MainLayout draws the Screen composed by NavigationBar and a passed in Widget.

class MainLayout extends StatelessWidget {
  final Widget child;
  const MainLayout({Key key,this.child}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return ResponsiveBuilder(
      builder: (context, sizingInformation) => Scaffold(
        drawer: sizingInformation.deviceScreenType == DeviceScreenType.mobile
            ? NavigationDrawer()
            : null,
        backgroundColor: Colors.transparent,
        body: CenteredWidget(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: <Widget>[
              NavigationBar(),
              Expanded(
                child: Navigator(
                  key: locator<NavigationService>().navigatorKey,
                  onGenerateRoute: generateRoute,
                  initialRoute: CyclistsLandingRoute,
                ),
//              child:child,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

In main() MaterialApp I return MainLayout if platform is web or the actually app if platform is not web :

        home: UniversalPlatform.isWeb
            ? MainLayout()
            : RetailerAccess(),
``

Answer 1

You need to add route name to settings when calling super. Change _FadeRoute as shown below, after change:

class _FadeRoute extends PageRouteBuilder {
    final Widget child;
    String route;

    _FadeRoute({this.child, this.route})
      : super(
          pageBuilder: (
            BuildContext context,
            Animation<double> animation,
            Animation<double> secondaryAnimation,
          ) =>
              child,
          transitionsBuilder: (
            BuildContext context,
            Animation<double> animation,
            Animation<double> secondaryAnimation,
            Widget child,
          ) =>
              FadeTransition(
                opacity: animation,
                child: child,
          ),
          settings: RouteSettings(name: route)
        );
}

in main method

MaterialApp(
    ...
     builder: (context, child) {
            return MainTemplateLayout(
              child: child,
            );
      },
      navigatorKey: RouterNavigationService().navigatorKey,
      onGenerateRoute: generateRoute,
      initialRoute: "/",
...

and in MainTemplateLayout

build(BuildContext context){
...
  Container(
    child: child, // this is child passed to MainTemplate
  ) 
}
...

Answer 2

Route<dynamic> generateRoute(RouteSettings settings) {
  print('generateRoute: ${settings.name}');
  switch ('${settings.name}') {
    case HomeRoute:
      return _getPageRoute(const HomePage(), settings);
    case UsersRoute:
      return _getPageRoute(const UsersPage(), settings);
    case ProductsRoute:
      return _getPageRoute(const ProductsPage(), settings);
     case LoginRoute:
      return _getPageRoute(const LoginPage(), settings);
     default:
      return _getPageRoute(const LoginPage(), settings);
  }
}

PageRoute _getPageRoute(Widget child, RouteSettings settings) {
  return MaterialPageRoute(
    settings: settings,
    builder: (context) => child
  );
}