flutterflutter-web

Flutter Web Navigation w/ Static Menu Bar?


I'm coming from Flutter Mobile and have been asked to build a flutter web app. I'm literally stuck on what feels like something that should be easy to do and I cannot for the life of me find any tutorial that is helpful.

The long and short is how can I build a flutter web app with a static navigation bar and only load pages into the "content" portion of the app.

I've been looking at this tutorial: https://dariadobszai.medium.com/interactive-navigation-items-in-flutter-web-7fccc5975779 however I can't figure out how to get it working with GoRouter. The pages also load a bit clunky.

Almost all the tutorials I can find are about resizing for web/mobile and do not get into any actual navigation. The responsiveness is nice, but how the heck do I navigate between pages with a static menu bar for a nice user experience?

Ideally the solution will utilize this menu (or one like it): https://pub.dev/packages/easy_sidemenu and https://pub.dev/packages/go_router.

Thank you!


Solution

  • I suggest start researching about Go router first not how to implement a static menu navigation bar, since Go router uses declarative routing which changes completely how navigation should be handled. I recommend this repo since it has different examples to use Go router, though be careful some examples may be deprecated.