[Web] Navigation and window href

[jamesblasco]

Problem

Hi, I am testing a web app with flutter and the url doesn't change as expected when pushing a route from navigation.

By default the url doesn't change from https://<..>/#/ but sometimes it also appears the name of a new route like https://<..>/#/dashboard.

Using the native chrome navigation for going forward and back doesn't work either as expected.

Proposal

I have been testing my self an example of how I would do it.

1. If you are in the route /page1 your url would look like https://<..>/#/page1
2. If you are in the route /page2 your url would look like https://<..>/#/page2
3. If you change routes it updates the url

import 'dart:html' as html;

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
            initialRoute: '/page1',
            onGenerateRoute: (settings)  {
               html.window.history.pushState(null, settings.name, '#' + settings.name);
               print(html.window.location.href);
               switch(settings.name) {
                 case '/page1': return MaterialPageRoute(builder: (_) => Page1());
                 case '/page2': return MaterialPageRoute(builder: (_) => Page2());
               }
               return MaterialPageRoute(builder: (_) => Page1());
            },
            title: 'History test'
    );
  }
}


class Page1 extends StatelessWidget
{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      backgroundColor: Colors.green,
      appBar: AppBar(title: Text('Page 1'),),
      body: Center(
        child: FlatButton(
          child: Text('Go to page 2'),
          onPressed: () => {
              Navigator.of(context).pushNamed('/page2')
          },
        ),
      ),
    );
  }

}

class Page2 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.red,
      appBar: AppBar(title: Text('Page 2'), leading: Container(),),
      body: Center(
        child: FlatButton(
          child: Text('Go back'),
          onPressed: ()  {
            if(Navigator.of(context).canPop()) {
              Navigator.pop(context);
              html.window.history.pushState(null, null, '#' + '/page1');
            } else {Navigator.pushReplacementNamed(context, '/page1');}
          },
        ),
      ),
      
    );
  }

}

(the example doesn't work with the navigation native buttons for pushing back and forward. )

[BondarenkoStas]

@jamesblasco Please provide your flutter doctor -v output.

[jamesblasco]

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel master, v1.10.7-pre.23, on Mac OS X 10.14.6 18G95, locale es-ES)

[✓] Android toolchain - develop for Android devices (Android SDK version 29.0.0)
[✓] Xcode - develop for iOS and macOS (Xcode 11.0)
[✓] Chrome - develop for the web
[✓] Android Studio (version 3.5)
[✓] Connected device (4 available)

• No issues found!

[rodydavis]

I was able to work with the forward and back buttons and even use deep linking by using the routes: {} builder on MaterialApp. You cannot use onGenerateRoute

I also dynamically add more routes for all the posts so i can have shareable links to my website:

class Router {
  static Map<String, WidgetBuilder> routes(BlogState state) {
    return {
      HomeScreen.routeName: (_) => HomeScreen(),
      AboutScreen.routeName: (_) => AboutScreen(),
      PrivacyPolicy.routeName: (_) => PrivacyPolicy(),
      AppsScreen.routeName: (_) => AppsScreen(),
      BlogScreen.routeName: (_) => BlogScreen(),
      ProjectsScreen.routeName: (_) => ProjectsScreen(),
      if (state is PostsReady) ...{
        for (var post in state.posts) ...{
          "/blog/${post.documentId}": (_) => PostDetails(
              id: post.documentId,
              post: FbPost.fromJson(json.decode(json.encode(post.data)))),
        },
      }
    };
  }
}

This also updates the href, and this is not needed.

html.window.history.pushState(null, settings.name, '#' + settings.name);
print(html.window.location.href);

My app build method:

  return MultiBlocProvider(
      providers: [
        BlocProvider<AuthBloc>(builder: (_) => _auth),
        BlocProvider<SettingsBloc>(builder: (_) => _settingsBloc),
        BlocProvider<BlogBloc>(builder: (_) => BlogBloc()),
      ],
      child: BlocListener<SettingsBloc, SettingsState>(
        listener: (context, state) {
          if (state is SettingsReady) {
            I18n.locale = state.settings.locale;
          }
        },
        child: BlocListener<AuthBloc, AuthState>(
          listener: (context, state) {
            if (state is LoggedInState) {
              BlocProvider.of<BlogBloc>(context).dispatch(LoadPosts());
            }
            if (state is LoggedOutState) {
              BlocProvider.of<AuthBloc>(context).dispatch(LoginGuest());
            }
          },
          child: BlocBuilder<SettingsBloc, SettingsState>(
            builder: (context, settingState) =>
                BlocBuilder<BlogBloc, BlogState>(
              builder: (context, blocState) => MaterialApp(
                debugShowCheckedModeBanner: false,

                theme: settingState is SettingsReady &&
                        settingState.settings.darkMode
                    ? AppTheme.dark
                    : AppTheme.light,
                darkTheme: settingState is SettingsReady &&
                        settingState.settings.useSystemSetting
                    ? AppTheme.dark
                    : null,
                onGenerateTitle: (context) => I18n.of(context).title,
                navigatorObservers: [_observer],
                locale: settingState is SettingsReady
                    ? settingState.settings.locale
                    : Locale("en", "US"),
                localizationsDelegates: [
                  i18n,
                  GlobalMaterialLocalizations.delegate,
                  GlobalWidgetsLocalizations.delegate,
                ],
                supportedLocales: i18n.supportedLocales,
                localeResolutionCallback: i18n.resolution(
                  fallback: settingState is SettingsReady
                      ? settingState.settings.locale
                      : Locale("en", "US"),
                ),
                onUnknownRoute: (details) => MaterialPageRoute(
                  builder: (_) => HomeScreen(),
                ),
                initialRoute: HomeScreen.routeName,
                routes: Router.routes(blocState),
              ),
            ),
          ),
        ),
      ),
    );

[mdebbar]

@jamesblasco I took a look at your example and I was able to figure out what's happening.

In onGenerateRoute(), you are receiving settings which correctly contains the route name. But you are not passing it to MaterialPageRoute(). Because of this, the generated route has no idea what its name should be, so it doesn't update the url.

To see the URL updated correctly, you could modify your code like this:

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      initialRoute: '/page1',
      onGenerateRoute: (settings)  {
          switch(settings.name) {
            case '/page1': return MaterialPageRoute(settings: settings, builder: (_) => Page1());
            case '/page2': return MaterialPageRoute(settings: settings, builder: (_) => Page2());
          }
          return MaterialPageRoute(settings: settings, builder: (_) => Page1());
      },
      title: 'History test'
    );
  }
}

That being said, there's an issue you pointed out that still needs to be fixed in the framework. When a nameless route is pushed, we are not clearing the route name in the browser address bar. I'm gonna send a PR soon to fix it.

Hope this helps!

[rodydavis]

Please check out my example. This will do exactly what you want with dynamic and named routes 👍🏼 https://github.com/AppleEducate/flutter_routing

[jamesblasco]

I will take a look! Thankks

[github-actions]

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.