0

I want you guys' insight on how this kind of navigation can be achieved in Flutter. How can we put navigation bar on the left side of the screen? How this can be done in a cleanest way?

Image of the navigation UI

Source: https://dribbble.com/shots/6833189-Tablet-Banking-App

I tried using out of box widgets in flutter. But, nothing seems to match the above navigation logic.

Edit: The navigation bar should stay constant.

Harish
  • 649
  • 5
  • 11
  • Have you tried go_router? It will help you achieve this effect with cleaner code and If you want to have a adaptive navigation for mobile,web,tablet etc you can use this package by material team itself here https://pub.dev/packages/adaptive_navigation – Bibek Saha Feb 16 '23 at 05:44
  • have you tried adaptive scaffold widget ? – MANISH DAYMA Feb 16 '23 at 05:59
  • The navigation I want doesn't follow material or Cupertino guidelines. So, these won't work. – Harish Feb 16 '23 at 06:08

1 Answers1

0

So if you want your right-side content to change, based on what you click in the left pane. Check out this video https://youtu.be/eikOZzfc0l4 by the official Flutter channel. I don't remember the details for myself.

Edited: I would use a stack. At the top of the stack, you can have the navigation bar. At the bottom of the stack is the actual app UI. Upon clicking one of the nav items, the UI at the bottom of the stack changes.

Mayur Mahajan
  • 124
  • 6
  • The navigation bar should stay constant at the same place while other part of the ui should change. – Harish Feb 16 '23 at 05:56