Search code examples
flutterdartflutter-layoutflutter-webflutter-animation

Beautiful and responsive "dropdown menu" / "pop-up" flutter


Please see the photos attached for the feature, or simply head to https://www.chrislorenzomusic.com and resize the window until you see the dropdown menu in top right corner appears and click on the menu to see the effect.

I'm not sure what this effect or feature is called, but was wondering what it's called and if it was possible to make something similar in flutter?

Before resizing the window

After resizing window the menu at top right corner appears

When clicking on the menu


Solution

  • When an app or widget behaves differently depending on the screen size or orientation it is considered responsive or has a responsive layout.

    https://docs.flutter.dev/development/ui/layout/adaptive-responsive

    The Menu itself can be created using a Scaffold with an AppBar and a Drawer. You can configure the AppBar to have the menu icon or the links depending on the size using LayoutBuilder and MediaQuery.of.

    AppBar https://material.io/components/app-bars-top

    Drawer https://material.io/components/navigation-drawer