Search code examples
flutterdartflutter-web

How to make top navigation bar in Flutter?


I'm developing a Discord bot with many fancy features, and want to make a web dashboard for users. First thing that came up in my mind was navigation bar (at top), to navigate between "Home", "Features", "Dashboard" etc., but as far as my googling and docs reading "skills" are, i couldn't find anything except NavigationBar (which looks very mobile-ish and 'll confuse desktop users) and Scaffold's bottomNavigationBar (which is, well, bottom). I need just the "default" navbar present on almost any website, to mention a few: flutter.dev, yahoo.com, MEE6 (another Discord bot), even the website you're currently on - StackOverflow.

Any help is appreciated!

(Also, if you're wondering why i am using flutter for such a simple thing - i want to eventually make a mobile app too, for nicer integration with device)


Solution

  • You can use the appBar property of the Scaffold Widget. Instead of providing an AppBar, you provide a PreferedSize-Widget and your Custom Dashboard as a child of PreferedSize, which basically takes any widget. For more information on PreferedSize and an example, check the following part of Flutter docs: https://api.flutter.dev/flutter/widgets/PreferredSize-class.html