Add client side navigation to demoflexfold

[harsimranmaan]

I like the demoflexfold webapp. It is the best flutter web app that I have seen so far. I am waiting eagerly for when you'll open source its code. I noticed that the pages are not navigable from the system(browser address bar) . I have been reading about navigator 2.0 and the new page routing system. I think having it part of demoflexfold would serve as a great reference point for a feature rich flutter app.

[rydmike]

Totally agree on adding proper web navigation to the Flexfold demo app.

The Flexfold package itself is totally navigation agnostic, it is only the Flexfold demo app that does not use proper Web navigation. It will certainly be there before it is open sourced, which I plan to do after I release the Flexfold package.

The Flexfold package will of course contain simpler use examples, but I was thinking this demo, if also open sourced, could be another useful example / reference on how Flexfold can be used, and maybe otherwise also provide some useful examples.

I recently got a similar question in an eMail and wrote a long reply, partially to document it for my own usage as well. I will rip out my plans from it for the Flexfold package and the Flexfold demo app and add it as an additional comment here.

[rydmike]

About Flexfold and Navigation

The Flexfold package itself is totally navigation agnostic, it can actually be seen as just a more advanced and flexible version of the Flutter Navigation rail. Thus you can use any preferred navigation method with it, Nav1 or Nav2 or some packages like Fluro and Autoroute should work fine too.

Flexfold even borrows the navigation destination setup concept from the Flutter Navigation Rail, but uses a bit more input configuration options and also returns a class with more info about what was selected when the user clicks around on bottom bar, drawer, rail or menu. This is needed so that different behavior can be implemented in the app for each selection. Like having different transition type for bottom nav mode, rail, drawer and menu, decided if a modal navigation is appropriate or not.

Here is Flexfold destination setup code example used for the Flexfold demo app:

So when you navigate around you don’t get just the index back, you get a class with this info back:

The properties are:

You can totally even skip the named routes for the destinations and just use the index to navigate to the selected destination, but why do that when you can define named routes for your destination and use the returned named route and pass it to your app’s router. This is what I am dong in the Flexfold demo app. The demo app actually display that info on every destination at the top of the page, just for demo purposes.

The demo app’s router also uses the navigation source, bottom, drawer, rail, menu to use different page transitions. When transition is used on a larger canvas, only the page content uses the transition effect, the menu/rail/bottom bar/app bar, do not use any transition animation. In my opinion this is important if you want to use page transitions on a large canvas, if you don’t it looks kind of weird. I even prefer this on phone sized apps, I don’t like when e.g. the bottom navbar is part of the page transition, but with a subtle transition it is often not noticed, so not as critical then.

The demo app also uses the useModal info to push a drawer selected destination as modal route, when that is appropriate on a phone sized canvas, but on a larger canvas that uses the rail or menu, it is not modal. Figuring that part out was actually a bit interesting, it is also something I have not seen done in other similar responsive solutions.

To be able to do the above things, an app like the Flexfold demo app, will have to use a nested navigator, using a layout root that holds single Flexfold scaffold, where the app’s nested navigator only swaps in the body content. You don’t have to do this, but if you don’t there really is no way to make the transitions only for the body part for those larger than phone canvas sizes.

You can still use a Flexfold scaffold the way often done with a normal scaffold and add the appbar, bottom nav, drawer, menus etc with the entire Scaffold every time you navigate to a new destination, the navigation transitions are just not as elegant then on a large canvas, but if you don’t plan to use any transition on a large canvas, or don’t mind the full page transition look, then it is a perfect valid choice, Flutter is fast enough to rebuild the entire thing on navigation to a new destination, just like often than with the standard Scaffold.

Flexfold Demo App and Current Navigation

The Flexfold demo app still has a bit lazy navigation, the live version does not support URL navigation, which you noticed. This is just a behavior of the demo app, not related to Flexfold. It is on my to do list to add proper Web URL navigation to the demo app as well, maybe even with some deep link examples. The Web URL stuff can be done with Nav1 too, but for a proper back stack from a deep link, using Nav2 definitely helps.

Honestly I have not tried Nav2 yet, experimented a bit with it and conclude it is a complex and very verbose beast. More like a mini framework for building a usable navigator, than something that is intended to be used directly by us mere mortal devs. I’ve kind of been waiting for some good packages to popup that would make using it easier for typical Web use cases. Remi, the author of Provider, Riverpod and bunch of other excellent useful stuff, mentioned he might tackle it as well. I saw Autoroute and Fluro mentioned they will add support for it, I have not checked them out yet.

Flexfold Demo App TODOs:

• Add correct WEB URL navigation
• Convert current Riverpod ChangeNotifier to StateNotifier, for the used setttings and theme models. I originally used Provider and ChangeNotifier for the demo app and lazily just migrated to Riverpod, with ChangeNotifier. I think StateNotifier and immutable models would be cleaner and more educational to use in the demo. Not really critical, works as it is for this simple example too, but it would be nicer.
• Maybe: Persist users Flexfold settings and theme selections. With a reset back to defaults, function available.
• Maybe: For bottom navigation destinations use a Cupertino like navigation style that remembers where on the page you were and where in any deeper navigation from each bottom/main destination, so that when you toggle the main destinations (the ones included in the bottom nav), you are always back where you were on them. Currently it resets to the start of the page. I don’t like that. Of course keeping the pages in mem to do what the Cupertino pageview does, uses more ram, so there is that disadvantages with it.
• Maybe: Change the Settings screen to a responsive one with a menu for the main categories, with sub modal screens for each category in phone view, that turns into a master detail view for tablet size, and that turns into staggered window view for desktop. With the last one I mean something like what starts on time stamp 1:05 in this demo I did some time ago: https://twitter.com/RydMike/status/1255621433352499207?s=20 Again not really needed for the demo, but I think it could be an educational sample/concept.
• Maybe: Add a module toggle example. I have to deal with apps that have many modules. When you switch to a new “module” within the app, it has totally new main destinations, the ones that also show up in the bottom navbar. This module might share some of the destinations in the menu/rail/drawer with all other modules and have some own destinations outside the main ones as well. Could be interesting to show an example of this as well with the Flexfold demo app. But maybe a bit more complex than what is normally dealt with for smaller/normal apps.
• Maybe: When the demo app is “final”, make a forked parallel version that uses GetX for state management and navigation. Just for demo and comparison.

Flexfold Package TODOs

On my todo list for the Flexfold package before publishing it:

• There is a tricky edge case (you have to work hard to find it, but it is there) with poor behavior that the Flutter SDK does not like, it throws but does not crash. I have not been able to solve it yet. I would like to take a crack at it again before publishing. If I can’t fix it, I will leave it in there and document it, maybe somebody in the community will come up with a solution.

• Semantics, need to check that it is fully supported. Might have some widgets in there that does not have it so I need to add it and make it possible to make it optional as well.

• The way I use Flexfold in the demo with a Nested Navigator makes it so that Flutter Desktop/Web does not find the menu with keyboard control traversal. I have to see how I can improve that. I read a good article about it, but can’t find it again… More googling I guess.

• Darn docs takes time. 😐 The API docs are done though, sure they could need proof reading and clarifications. I tend to write the API docs as I code, otherwise I forget what all the stuff was for too 😊

• Need to write a simpler sample app, maybe two small examples. Much simpler than the Flexfold demo app. I will publish them as live variants too.

• LTR/RTL is supported already, but I want to double check some use cases. You can already toggle LTR/RTL in the demo app to try it.

• Flexfold uses a Flutter SDK API that currently has a conflict with between stable and beta/dev/master. Currently if you make a version that works on stable it does not work on beta/dev/master and wise versa. This has me a bit on the edge of not publishing Flexfold until it the new API has reached stable.

  • The issue is the removal of the nullOK parameter and it has to do with null safety See this design doc for the background. Currently stable has to use the "nullOK" versions and beta/dev/master the "maybeOf" API. So I'm using the latter variant in a few places, since I am using dev channel and "nullOK" is no longer even available as a deprecated API. And of course the "maybeOf" variant is not available on stable. I guess it will be when null safety reaches stable. I am a bit surprised if Google Flutter team will totally take a way the "nullOK" variant and not just keep it around as deprecated for a while, since it will break a lot of code for many devs, but I suppose the null safe version of Flutter might be released with a lot of breaking features anyway. Still seems like it goes against their deprecation policy. I have been considering to maybe post an issue and ask what their plan is for this is. Maybe there already is an issue for it open, last time I looked I could not find one though. I already have so many issues open in the Flutter repo though and this one did not seem so urgent at the moment, but the situation is a bit odd imo.

• Maybe: Config for Menu/Rail/Drawer on right side in a LTR setup, and wise versa for RTL.

• Maybe later after release: Config options for: Top menu, Floating menu.

• Maybe later after release: Animate the menu/rail choice indicator from current choice to the selected one. (Configurable to be optional and animation configurable as well)

[harsimranmaan]

Thanks a lot for the valuable insights. I am looking forward to the flexfold package. I have been reading up on how to do webapps in flutter as I need it for a major persona of the Shipanther app. I am learning something new every time I try to build a feature. My ux skills are a bit rusty as it’s been a decade almost since I did frontend dev work on a major project and those jquery, backbone patterns are long outdated. Flutter feels like a good framework with great tooling. I am in the beginner/intermediate phase for flutter but happy to contribute where I can.

[anthonycmeow]

I agreed, and yes, Flexfold is the best Flutter Web application I have seen. For sure I will use Flexfold to rebuild all of Flutter Web Application. Look forward to the publish, I would like to provide any help if possible. Thanks @rydmike for your work.