Search code examples
flutterdartmenubar

Flutter menubar


I started with Flutter/Dart and now I'm trying to write a program for Linux. I'm just wondering how to make menubars with Flutter (like in Atom or VSCode). I can't find anything helpful on the internet, unfortunately. Can someone here maybe help me?


Solution

  • I think that you would probably use an app bar and in the actions field you would create a drop down menu. Something on the lines of these:

    In the build method:

    @override
    Widget build(BuildContext context){
        return Scaffold(
            appBar: AppBar(
                actions: [
                    //Here you can pass the PopupMenu
                    ElevatedButton(onPress: (){
                         //Show the menu here
                    }, child: "File")
                ]
            ),
            body: Container()
        );
    }
    

    //From the material.io docs https://material.io/components/menus/flutter/

    And probably you have to show the menu using these widgets:

    PopupMenuButton(
      icon: Icon(Icons.more_vert),
      itemBuilder: (BuildContext context) => <PopupMenuEntry>[
        const PopupMenuItem(
          child: ListTile(
            leading: Icon(Icons.add),
            title: Text('Item 1'),
          ),
        ),
        const PopupMenuItem(
          child: ListTile(
            leading: Icon(Icons.anchor),
            title: Text('Item 2'),
          ),
        ),
        const PopupMenuItem(
          child: ListTile(
            leading: Icon(Icons.article),
            title: Text('Item 3'),
          ),
        ),
        const PopupMenuDivider(),
        const PopupMenuItem(child: Text('Item A')),
        const PopupMenuItem(child: Text('Item B')),
      ],
    ),
    

    Instead of PopupMenuButton you can also use DropdownMenuButton also :).