Open harsimranmaan opened 3 years ago
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.
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.
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.
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.
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)
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.
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.
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.